在用CSS实现等效中，经常会用到渐变，所以，本篇就研究一下渐变的特性；

在CSS中，渐变并不是作为CSS中的一个属性来实现的，而是作为一个函数来实现的；它可用作image属性的值，所以，渐变应用在所有接受图像的属性上，比如background-image；而又由于background-image可以接受多组值，所以可以用background-image和渐变实现丰富的效果；

一.渐变的定义

1. 使用范围：

1. 渐变在一个拥有尺寸的盒子中被生成，被称之为渐变盒，但是渐变本身并没有内在的尺寸，也就说如果在一个没有尺寸的容器上定义渐变，将无法被呈现；
2. 渐变可以应用在所有接受图像的属性上；

2. 语法定义

目前，在CSS中支持2种渐变：

1. 线性渐变；
2. 径向渐变；

每种渐变都有非重复渐变和重复渐变函数；它们的语法规则如下：

1. 线性渐变：linear-gradient()

   <linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner>    ] ,]? <color-stop>[, <color-stop>]+)
   <side-or-corner> = [left | right] || [top | bottom]
   <color-stop> = <color> [ <length> | <percentage> ]?
   

2. 重复线性渐变：repeating-linear-gradient()

   <repeating-linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
   <side-or-corner> = [left | right] || [top | bottom]
   <color-stop> = <color> [ <length> | <percentage> ]?
   

3. 径向渐变：radial-gradient()

   <radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
   <position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
   <shape> = circle | ellipse
   <size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]
   <extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
   <circle-size> = <length>
   <ellipse-size> = [ <length> | <percentage> ]{2}
   <shape-size> = <length> | <percentage>
   <color-stop> = <color> [ <length> | <percentage> ]?
   

4. 重复径向渐变：repeating-radial-gradient()

   <repeating-radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
   <position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
   <shape> = circle | ellipse
   <size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]
   <extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
   <circle-size> = <length>
   <ellipse-size> = [ <length> | <percentage> ]{2}
   <shape-size> = <length> | <percentage>
   <color-stop> = <color> [ <length> | <percentage> ]?
   

二. CSS渐变特性研究

接下来，以线性渐变为例进行研究；（注意：
所有特性的总结在文章最下面；）

从渐变的语法定义中可以得出：
特性1: 每个渐变至少需要指定2个色标color-stop；

我们先定义一个从0%到100%的渐变，如下：
CSS样式：

background-image: linear-gradient(to right,red 0%,blue 100%);

示例效果：

特性2.png

从这个示例中可以得出：
特性2: 对于任意2个相邻色标之间的颜色变化是：在前一个色标与后一个色标的位置之间，线性地把前一个色标的颜色过渡到后一个色标的颜色；

接下来，我们在色标1与色标2之前插入几个没有指定位置的色标，如下：
CSS样式：

background-image: linear-gradient(to right,red 0%,green,yellow,purple,blue 100%);

示例效果：

特性3.png

从示例效果中可以看出，插入的几个色标虽然没有指定位置，但是它们是平分区间的，所以就有：
特性3: 对于多个没指定位置的色标，它们的位置分别是：前面最近的有位置的色标的位置 与 后面最近有位置的色标的位置 之间的平分点；

如果把这个示例中的第1个和最后1个色标的位置都去掉，则所示色标都将没有指定位置，效果如下：

CSS样式：

background-image: linear-gradient(to right,red,green,yellow,purple,blue);

示例效果：

特性4.png

从示例效果中可以看出，即使把第1个和最后1个的色标的位置都去掉，第1个色标仍然是在最前端，最后1个色标仍然是在最后端，所以就有：
特性4: 如果第1个色标没有指定位置，则第1个色标的位置是渐变区域的起始位置；
特性5: 如果最后1个色标没有指定位置，则最后1个色标的位置是渐变区域的结束位置；

如果把非重复渐变的第1个色标的位置不放在最前端，最后1个色标的位置不放在最后端，则效果如下：

CSS样式：

background-image: linear-gradient(to right,red 25%,green,blue 75%);

示例效果：

特性6.png

从示例效果中可以看出，对于非重复渐变，把第1个色标往后移后，第1个色标之前的颜色仍是第1个色标的颜色；把最后1个色标往前移后，最后一个色标之后的颜色仍是最后1个色标的颜色，所以就有：
特性6: 对于非重复渐变，第1个色标位置之前的颜色是第1个色标的颜色；最后一个色标位置之后的颜色是最后一个色标的颜色；

如果把上例的非重复渐变换成重复渐变，如下：

CSS样式：

background-image: repeating-linear-gradient(to right,red 25%,green,blue 50%);

示例效果：

特性7.png

从示例效果中可以看出，对于第1个色标之前的区域 和 最后1个色标之后的区域，重复渐变会自动用指定的渐变区域平铺；所以就有：
特性7: 对于重复渐变，会用渐变区域分别平铺第1个色标之前的区域 和 最后1个色标之后的区域 ，直到填满为止；

如果把此示例中的渐变区域缩小到零呢，如下：
CSS样式：

background-image: repeating-linear-gradient(to right,red 50%,green,blue 50%);

示例效果：

特性8.png

从示例效果中可以看出，如果渐变区域为零，则会用最后一个色标的颜色填充整个区域；所以就有：
特性8: 对于重复渐变，如果渐变渐变区域的长宽为零，则会用最后1个色标的颜色填充整个区域；

如果后面的色标的位置在前端色标的位置的前面，如下：
CSS样式：

background-image: linear-gradient(to right,red 50%,blue 25%);

示例效果：

特性9.png

从示例效果中可以看出，虽然后面的色标blue的位置设置在了前端的色标red的前面，但是最终，后面色标的位置是用前面的色标的位置作为自己的位置的；所以就有：
特性9: 如果前面色标设置的位置大于后面色标设置的位置，则后面色标设置的位置无效，所有比前端色标的位置小的色标，都将用 大于自身位置的前面的色标中位置最大的那个色标的位置 作为自身的位置；

总结以所有特性，就有：

CSS中渐变函数的特性：

1. 每个渐变至少需要指定2个色标color-stop；
2. 对于任意2个相邻色标之间的颜色变化是：在前一个色标与后一个色标的位置之间，线性地把前一个色标的颜色过渡到后一个色标的颜色；
3. 对于多个没指定位置的色标，它们的位置分别是：前面最近的有位置的色标的位置 与 后面最近有位置的色标的位置 之间的平分点；
4. 如果第1个色标没有指定位置，则第1个色标的位置是渐变区域的起始位置；
5. 如果最后1个色标没有指定位置，则最后1个色标的位置是渐变区域的结束位置；
6. 对于非重复渐变，第1个色标位置之前的颜色是第1个色标的颜色；最后一个色标位置之后的颜色是最后一个色标的颜色；
7. 对于重复渐变，会用渐变区域分别平铺第1个色标之前的区域 和 最后1个色标之后的区域 ，直到填满为止；
8. 对于重复渐变，如果渐变渐变区域的长宽为零，则会用最后1个色标的颜色填充整个区域；
9. 如果前面色标设置的位置大于后面色标设置的位置，则后面色标设置的位置无效，所有比前端色标的位置小的色标，都将用 大于自身位置的前面的色标中位置最大的那个色标的位置 作为自身的位置；

相关文章

• CSS中颜色突变的实现方案
• CSS中条纹效果的实现方案
• CSS中环形效果的实现方案
• CSS中网格效果的实现方案
• CSS中变换背景保持内容的实现方案
• 标签、元素、视觉格式化模型、定位简略相关概念的理解