线性渐变

基本语法：linear-gradient([方向], 颜色1 [位置], 颜色2 [位置],...)。其中，方向可以是角度值（如45deg）或关键词（如to left、to top right等），表示渐变的方向；颜色是指要过渡的颜色值；位置是可选的，用于指定颜色在渐变中的位置，可以是百分比（如20%）或长度值（如50px）。

示例代码

css

.element {

  background: linear-gradient(to bottom, #FF5733, #33FF57);

  /* 从顶部到底部，由橙色到绿色的渐变 */

}

css

.element {

  background: linear-gradient(45deg, #007BFF, #FFC107 50%, #28A745);

  /* 从左上角到右下角，由蓝色开始，在50%位置过渡到黄色，最后到绿色 */

}

径向渐变

基本语法：radial-gradient([形状] [大小] [位置], 颜色1 [位置], 颜色2 [位置],...)。其中，形状可以是circle（圆形）或ellipse（椭圆形）；大小可以是关键词（如closest-side、farthest-corner等）或长度值；位置可以用关键词（如center、top left等）或坐标值来指定。

示例代码

css

.element {

  background: radial-gradient(circle, #FF0000, #00FF00);

  /* 以元素中心为圆心，由红色到绿色的径向渐变 */

}

css

.element {

  background: radial-gradient(ellipse at top left, #0000FF, #FFFF00 30%, #FF00FF);

  /* 以左上角为起点的椭圆形径向渐变，由蓝色开始，在30%位置过渡到黄色，最后到紫色 */

}

重复渐变

基本语法：如果想要创建重复的渐变图案，可以使用repeating-linear-gradient()或repeating-radial-gradient()函数，语法与普通渐变类似。

示例代码

css

.element {

  background: repeating-linear-gradient(45deg, #FF9900, #FF9900 10px, #FFCC00 10px, #FFCC00 20px);

  /* 45度方向，橙色和黄色交替的重复线性渐变，每种颜色块宽度为10px */

}

css

.element {

  background: repeating-radial-gradient(circle at center, #0066CC, #0066CC 15px, #3399FF 15px, #3399FF 30px);

  /* 以中心为圆心，蓝色和浅蓝色交替的重复径向渐变，每种颜色环宽度为15px */

}