css渐变

CSS渐变（CSS gradient）是一种在元素背景、边框或文本上创建平滑过渡效果的方法。CSS渐变可以使用线性渐变（linear gradient）或径向渐变（radial gradient）来实现。下面是使用CSS渐变的基本示例：

1、线性渐变：

div {
background: linear-gradient(to right, #ff0000, #00ff00);
}

上述代码将div元素的背景设置为从红色（#ff0000）渐变到绿色（#00ff00）的线性渐变。你可以调整to right来改变渐变的方向，还可以添加更多颜色值来定义更复杂的渐变效果。

2、径向渐变：

div {
background: radial-gradient(circle, #ff0000, #00ff00);
}

上述代码将div元素的背景设置为从红色（#ff0000）渐变到绿色（#00ff00）的径向渐变。circle参数表示渐变的形状是圆形，你还可以使用ellipse表示椭圆形状。

渐变方向和颜色停止点：

div {
background: linear-gradient(to bottom right, #ff0000, #00ff00 50%, #0000ff);
}

上述代码将div元素的背景设置为从右上角向左下角渐变的线性渐变。颜色停止点（color stops）可以用百分比来指定，用于定义渐变中颜色的位置和过渡点。

需要注意的是，以上示例只是演示了基本的线性和径向渐变。CSS渐变还支持更复杂的设置，例如添加多个颜色停止点、使用角度、透明度和渐变重复等。你可以根据具体需求参考CSS渐变的文档，并进行进一步的定制和实验。

相关词： 渐变