理解CSS线性渐变linear-gradient

径向渐变

渐变是两种或多种颜色之间的过渡，线性渐变是多种颜色沿着一条直线（渐变线）过渡，渐变的实现由渐变线和色标两部分组成，渐变线控制渐变的方向；色标控制渐变的颜色变化，色标包括颜色和位置。浏览器从每个色标的位置淡出到下一个位置，通过确定多个色标的位置可以制作多色渐变效果。

语法：linear-gradient([[<angle> | to <side-or-corner>],]? <color-stop>[, <color-stop>]+)

示例效果

渐变线

渐变线从渐变框的中心向两个方向进行拓展，起点和终点是渐变线与经过经过渐变框的一个角的垂直线的相交点。

渐变线第一个参数指定渐变方向，默认值to bottom，指定渐变的两种方法：

1.使用角度。0deg表示沿着元素中心轴由下向上渐变（y轴），正值顺时针旋转，负值逆时针旋转。

2.使用关键字。关键字是角度的特殊表现形式。

to top ->  odeg
to right -> 90deg
to bottom -> 180deg
to left -> -90deg (或270deg)
to top left -> -45deg (或315deg)
to top right -> 45deg
to bottom left -> -135deg (或225deg)
to bottom right -> 135deg

例1演示了默认效果，例2演示了to right效果

色标

色标没有默认值，至少要设置两个色标才会有渐变效果，色标中的颜色值可以是任何一种颜色模式，位置可以是百分比或数值（可以是负值）。

色标的注意事项：

1. 颜色在前，位置在后

background-image: linear-gradient(red 0%, green 100%);

2. 位置可省略，浏览器把第一个颜色位置设置为0%，最后一个颜色位置设置为100%。

background-image: linear-gradient(red 0%, green 100%);

// 等价于
background-image: linear-gradient(red, green);

3. 若渐变只有两种颜色，并且第一个颜色值设置为n%， 第二个颜色值设置为m%，那么浏览器会将0%-n%范围内设置为第一种纯色，n%-m%范围内设置为第一种颜色到第二种颜色的渐变色，m%-100%范围内设置为第二种颜色的纯色。

background-image: linear-gradient(red 30%, green 60%);

// 等价于
backgrounf-image: linear-gradient(red 0%, red 30%, green 60%, green 100%);

例3演示了效果

4. 渐变没有指定位置，则渐变均匀分布

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

// 约等价于
background-image: linear-gradient(red 0%, yellow 33.333%, green 66.666%, blue 100%);

例4演示了效果

5. 若同一个位置设置同一种颜色，例如a、b、c三色都占据在同一位置，那么0%-n%为前一种颜色与a色发生渐变，n%-100%为c颜色与后一种颜色发生渐变，而n%-n%为a色与c色的颜色突变，中间的b色是没有用的。

background-image: linear-gradient(red, yellow 50%, green 50%, blue 50%, black);

// 等价于
background-image: linear-gradient(red, yellow 50%, blue 50%, black);

例5演示了效果

重复渐变(repeating-linear-gradient)

像背景图片一样，渐变也是可以重复的，重复渐变使色标在渐变线上无限重复。注意只有当首尾的颜色位置不是0%或100%时，重复渐变才有效，因为首尾颜色都被占去了就没有可以复制的位置了。

例6演示了效果

纸张效果

<style>
.t7 {
  width: 200px;
  height: 150px;
  background-image: repeating-linear-gradient(#f3f3f3, #f3f3f3 18%, #ccc 19%);
}
.t7 p {
  font-size: 16px;
  line-height: 1.8;
}
</style>
<div class=" t7">
<p>我是一段文本我是一段文本我是一段文本我是一段文本</p>
</div>

我是一段文本我是一段文本我是一段文本我是一段文本

结语

在CSS样式中，渐变相当于背景图片，所以理论上可以在任何试用url()值的地方使用，但是只有background-image在各浏览器中得到了广泛支持。