CSS3 径向(圆形)渐变 (radial-gradient)

最新推荐文章于 2025-03-31 16:43:41 发布

houyanhua1

最新推荐文章于 2025-03-31 16:43:41 发布

阅读量5.1k

点赞数

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/79657226

版权

CSS 同时被 3 个专栏收录

65 篇文章

订阅专栏

HTML5

54 篇文章

订阅专栏

CSS3

33 篇文章

订阅专栏

本文介绍并展示了如何使用CSS的radial-gradient属性为不同div元素设置径向渐变背景。通过调整圆心位置、辐射半径及颜色渐变比例等参数，实现了多样化的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>