CSS3新特性详解(六)：线性渐变Linear Gradients和径向渐变Radial Gradients使用说明

继之前介绍了CSS3新特性，共5篇后，本文继续讨论CSS3的另外一个特效属性颜色渐变Gradients，包括线性渐变Linear Gradients和径向渐变Radial Gradients。线性渐变相对简单，径向渐变Radial Gradients由于参数较多，语法略显复杂，而且网上很多DEMO都不生效，因此写本文对CSS3的渐变使用做一总结以备今后参考，主要参考资料为MDN和w3c。
颜色渐变顾名思义就是一种颜色到另外一种颜色的过渡，可能会有若干个中间颜色，比如红色先变成蓝色再变成黑色。CSS3 定义了两种类型的渐变：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
此外还有2种延伸的渐变：重复线性渐变(repeating-linear-gradient)，重复径向渐变(repeating-radial-gradient)。

1、线性渐变（Linear Gradients）

创建一个线性渐变，须至少定义两个颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

语法： background: linear-gradient(direction, color-stop1, color-stop2, …);

说明： direction 可以为空，默认从上到下，可以是方向，也可以是角度，具体值如下：

方向：上到下to bottom、下到上to top、左到右to right、右到左to left、左上到右下to bottom right、左下到右上to top right等；
角度：下到上0deg、左到右90deg等

1）可以使用多个颜色节点

background: linear-gradient(red, green, blue);

2）颜色可以使用透明色,rgba()

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))

3）重复的线性渐变,repeating-linear-gradient()

background: repeating-linear-gradient(red, yellow 10%, green 20%);

重复的线性渐变，用法与linear-gradient一致，有个难点（颜色占比问题）：

可以定义颜色变化幅度，如上例，红色->黄色占比10%，黄色->绿色占比10%，重复5遍
red, yellow 20%, green 100% 则红色->黄色占比20%，剩余高度由黄色->绿色填充

案例说明：

Box1，从左到右红绿蓝渐变，重复了5遍

Box2，从左到右红绿蓝渐变，

Box3，从左下角到右上角渐变

Box4，使用了透明渐变色

Box5，使用了透明渐变色

颜色占比说明：

linear-gradient和repeating-linear-gradient，颜色参数都可以带颜色占比 color 10%；

repeating-linear-gradient(red, yellow 10%, green 20%)，表示黄色的实色部分在宽度10%处，蓝色实色部分在宽度20%处，具体请看个颜色占比案例：

box2，blue 50%, 蓝色实色部分在宽度50%处，渐变红色到蓝色在宽度50%处结束，剩下宽度由蓝色完全填充；
box3，red 20%，前20%宽度由红色填充，20%宽度到50%宽度为红色到蓝色的渐变区域，剩余50%为蓝色填充区域。

2、径向渐变（Radial Gradients）

参考MDN的图：
在这里插入图片描述
创建一个径向渐变，需要：

一个中心点（圆心位置），默认为center，元素中心点；
指定形状：圆形（circle）还是椭圆（ellipse），默认为ellipse；
至少2个颜色点

除此之外，我们可以设置形状大小，颜色占比等。

语法：

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , |
    at <position> ,
  ]?
  <color-stop-list> [ , <color-stop-list> ]+
)

形状大小常量：extent-keyword，有4个值：

closest-side （指定径向渐变的半径长度为从圆心到离圆心最近的边）

closest-corner （指定径向渐变的半径长度为从圆心到离圆心最近的角）

farthest-side （指定径向渐变的半径长度为从圆心到离圆心最远的边）

farthest-corner （指定径向渐变的半径长度为从圆心到离圆心最远的角），默认值

从语法可以看出，径向渐变比线性渐变复杂，因此相对难学。为便于理解，请大家参考DEMO。

1）设置圆心位置、形状、形状尺寸案例

在这里插入图片描述
说明：

box1，形状默认为椭圆，圆心为center 中心点，size为farthest-corner

box2，形状为圆，圆心为中心点，size为farthest-corner

box3，形状为圆，圆心为左上角，size为farthest-corner

box4，形状为圆，圆心为right center，size为半径60px

box5，形状为椭圆，圆心为right center，size为长半径80px，短半径60px