CSS 渐变属性linear-gradient

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。

• 渐变轴为45度，从蓝色渐变到红色

  linear-gradient(45deg, blue, red);

• 从右下到左上、从蓝色渐变到红色

  linear-gradient(to left top, blue, red);

• /从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束

  linear-gradient(0deg, blue, green 40%, red);

实例：

background: linear-gradient(#e66465, #9198e5);

结果：

background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);

结果：

background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);

结果：

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

结果：

如同其他gradient函数一般，linear-gradient() 函数没有内在尺寸；即，它不具备固有的或首选的尺寸，也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。

提示：

• 利用repeating-linear-gradient函数可以实现线形重复渐变效果。

• 由于<gradient>数据类型系<image>的子数据类型，<gradient>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不适用于background-color以及类似的使用 <color>数据类型的属性中。