css3渐变属性怎么使用?c3渐变用法教程

　　CSS3中的渐变(Gradient)属性可以让我们用平滑的颜色过渡实现多彩背景的效果。渐变属性分为线性渐变和径向渐变，每种渐变又分为颜色渐变和透明度渐变。

　　### 线性颜色渐变

　　线性颜色渐变由起点、终点和中间点颜色组成。通过定义起点、终点和中间点颜色，可以实现从一种颜色过渡到下一种颜色的效果。语法如下：

background: linear-gradient(direction, color-stop1, color-stop2, .....)

      其中，direction表示渐变方向，可以为to left、to right、to top、to bottom，也可以指定角度。

　　color-stop表示颜色的停止点，可以设置多个颜色停止点。例如：

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

      上述代码表示设置一条从左到右的渐变线，分别从红到绿再到蓝。

　　### 线性透明度渐变

　　线性透明度渐变与颜色渐变类似，可以设置渐变的起点、终点和颜色。但其颜色值可以带有透明度值。语法如下：

background: linear-gradient(direction, rgba(color1, opacity1), rgba(color2, opacity2), .....)

      其中，opacity表示不透明度，可以为0到1之间的小数。例如：

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

      上述代码表示设置一条从左到右的透明度渐变，从完全透明到不透明的红色。

　　### 径向颜色渐变

　　径向渐变是以一个圆心为半径，向外辐射状的颜色渐变。可以设置起点、终点和中间点颜色，实现从一种颜色过渡到下一种颜色的效果。语法如下：

background: radial-gradient(shape size at position, start-color, ..., last-color);

     其中，shape是渐变形状，可以是circle或ellipse，size表示渐变大小，可以是closest-side、closest-corner等值，at position表示渐变位置，可以是数值或方向。例如：

div {
  background: radial-gradient(ellipse at center, #ff0000, #00ff00, #0000ff);
}

      上述代码表示设置一个以圆心为半径，从红到绿再到蓝的圆形渐变。

　　### 径向透明度渐变

　　径向透明度渐变与颜色渐变类似，可以设置渐变的起点、终点和颜色。但其颜色值可以带有透明度值。语法如下：

background: radial-gradient(shape size at position, rgba(start-color, opacity1), ..., rgba(last-color, opacityn));

      例如：

div {
  background: radial-gradient(circle, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

      上述代码表示设置一个圆形透明度渐变，从完全透明到不透明的红色。

　　总之，CSS3中的渐变属性可以让页面变得更加鲜明多彩，用好了可以增加页面的美感和观赏性。