CSS 渐变

CSS渐变是一种创建平滑过渡效果的技术，可以用来为元素填充背景色、阴影、文本等等。本文将向程序员们介绍CSS渐变的常用方法。

线性渐变

线性渐变中，颜色沿着一条直线渐变。以下是一个简单的线性渐变：

background: linear-gradient(to right, blue, green);

这个渐变会从左到右从蓝色渐变到绿色。

渐变可以沿任何方向进行，可以使用以下关键词指定方向：

• to bottom：从上到下
• to top：从下到上
• to left：从右到左
• to right：从左到右

此外，渐变可以沿着对角线进行，可以使用以下关键词指定方向：

• to bottom left：从右上方到左下方
• to bottom right：从左上方到右下方
• to top left：从右下方到左上方
• to top right：从左下方到右上方

径向渐变

径向渐变中，颜色从中心向外辐射状渐变。以下是一个简单的径向渐变：

background: radial-gradient(circle, yellow, orange);

这个渐变会从黄色渐变到橙色。

重复渐变

可以使用 repeat 关键词来创建重复的渐变。例如，以下代码会在水平方向上重复一个线性渐变：

background: repeating-linear-gradient(to right, red, orange, yellow 20px);

这个渐变会从左到右重复出现，每个渐变的长度为20像素，并在黄色处结束。

总结

CSS渐变可以用来为元素创建平滑的过渡效果。线性渐变沿一条直线进行，可以使用关键词指定方向；而径向渐变从中心向外扩散。重复渐变可以使用 repeat 关键词来循环出现。这些技术可以结合使用，以创建更复杂的效果。