編碼的世界 / 優質文選 / 生涯

CSS3 徑向(圓形)漸變 (radial-gradient)

2022年6月28日
-   

demo.html：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {





			width: 300px;
			height: 300px;
			border: 1px solid #000;
			margin: 10px auto;
		}
		/* 徑向(圓形)漸變色 */
		div:nth-child(1) {
			background: radial-gradient(at left top, yellow, blue); /* [輻射半徑]圓心位置,起始顏色,終止顏色 */
		}
		div:nth-child(2) {
			background: radial-gradient(100px at left top, yellow, blue); /* 輻射半徑 圓心位置 */
		}
		div:nth-child(3) {
			background: radial-gradient(at 100px 100px, yellow, blue); /* 圓心位置可以是像素值 */
		}
		div:nth-child(4) {





			background: radial-gradient(at center, yellow 0%, blue 30%, red 70%, purple 100%); /* 多種顏色,百分比表示漸變半徑上的位置 */
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</body>
</html>

熱門文章