学会css3渐变属性，你这样这篇文章-原创手记-慕课网

CSS3颜色渐变色彩 CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

这一小节我们来说一下线性渐变：

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

渐变轴为45度，从蓝色渐变到红色 linear-gradient(45deg, blue, red);
从右下到左上、从蓝色渐变到红色 linear-gradient(to left top, blue, red);
从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 linear-gradient(0deg, blue, green 40%, red);

实例1：

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

效果如下：
图片描述

实例2：

p {
  width: 400px;
  height: 150px;
  line-height: 150px;
  text-align:center;
  color: #000;
  font-size:24px;
  background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);;
}

效果如下：
Image 11.png

实例3：

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

结果如下：
图片描述

实例4：

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函数可以实现线形重复渐变效果。
由于数据类型系的子数据类型，只能被用于可以使用的地方。因此，linear-gradient() 并不适用于background-color以及类似的使用数据类型的属性中。

感谢您的阅读，创作不易，动动你的小手指，给我点个赞吧，顺便给个关注哦！