CSS3渐变属性详解

CSS3 渐变属性主要包括线性渐变（linear-gradient）和径向渐变（radial-gradient）。

1. linear-gradient() 创建一个线性渐变背景。

/* 基本语法 */
background: linear-gradient(direction, color-stop1, color-stop2, ...);
 
/* 示例：创建一个从左(左上角)到右(右下角)的线性渐变，从蓝色过渡到红色 */
div {
  background: linear-gradient(to right, blue, red);
}

2. radial-gradient() 创建一个径向渐变背景。

/* 基本语法 */
background: radial-gradient(shape size at position, start-color, ..., last-color);
 
/* 示例：创建一个圆形渐变，从绿色过渡到透明 */
div {
  background: radial-gradient(circle, green, transparent);
}

3. repeating-linear-gradient() 创建一个重复的线性渐变背景。

/* 基本语法 */
background: repeating-linear-gradient(direction, color-stop1, color-stop2, ...);
 
/* 示例：创建一个重复的线性渐变，从浅蓝色到深蓝色 */
div {
  background: repeating-linear-gradient(to right, lightblue, darkblue 10%);
}

4. repeating-radial-gradient() 创建一个重复的径向渐变背景。

/* 基本语法 */
background: repeating-radial-gradient(shape size at position, color-stop1, color-stop2, ...);
 
/* 示例：创建一个重复的径向渐变，从红色过渡到蓝色 */
div {
  background: repeating-radial-gradient(circle, red, blue 10%);
}

这些属性可以用来创建各种视觉效果，提升网页设计的视觉吸引力。