css径向渐变

60次阅读
没有评论

CSS的径向渐变是一种可以从一个中心点开始,沿着半径方向逐渐变化的渐变效果。下面是一个简单的示例,演示如何使用CSS的径向渐变。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>使用CSS的径向渐变</title>
	<style>
		.gradient {
			background: radial-gradient(circle, #ff0000, #0000ff);
			height: 200px;
			width: 200px;
		}
	</style>
</head>
<body>
	<div class="gradient"></div>
</body>
</html>

在上面的代码中,我们创建了一个带有红色和蓝色径向渐变效果的div元素。在CSS中,我们使用 radial-gradient() 函数来创建径向渐变。该函数接受多个参数,其中第一个参数指定渐变的形状和大小,后续参数指定颜色值。

在本例中,我们将渐变形状设置为“circle”,表示创建一个圆形的渐变。我们使用 #ff0000 和 #0000ff 两个颜色值来创建从红色到蓝色的渐变效果。

最后,我们为该元素设置了高度和宽度,以确保渐变效果可以完整地显示出来。

这是一个完整的HTML页面,其中包含一个带有径向渐变的div元素:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>使用CSS的径向渐变</title>
	<style>
		.gradient {
			background: radial-gradient(circle, #ff0000, #0000ff);
			height: 200px;
			width: 200px;
		}
	</style>
</head>
<body>
	<div class="gradient"></div>
</body>
</html>
正文完
 
评论(没有评论)