css3线性渐变背景色 |css3小图标字体

background: linear-gradient(direction, color-stop1, color-stop2, ...);

其中，direction为渐变方向，可以是top（从上至下）、bottom（从下至上）、left（从左至右）、right（从右至左）以及其它角度；而color-stop则表示渐变中的颜色点，可以是颜色值或者百分比。

background: linear-gradient(top, #f00, #00f);
background: linear-gradient(left, #f00, #00f);
background: linear-gradient(135deg, #f00, #00f);
background: linear-gradient(to top right, #f00, #00f);
background: linear-gradient(0deg, #f00 20%, #00f 80%);

以上代码分别表示红色到蓝色的从上至下、从左至右、从135度角度方向、从右上角到左下角方向、从0%到20%是红色，从20%到80%过渡到蓝色。

此外，CSS3线性渐变还有两个重要的扩展属性：background-repeat和background-position

background: linear-gradient(right, #f00, #00f) no-repeat;
background: linear-gradient(center, #f00, #00f) 50% 50% / 50% 50% no-repeat;

以上代码分别表示不重复的从右至左的颜色渐变以及居中对齐的颜色渐变，所占据背景区域的50%宽度和50%高度，不重复。

总之，CSS3的线性渐变背景色可以让大家在网页设计中更加灵活地运用颜色。同时需要注意，在低版本的浏览器中，兼容性可能存在问题。