css gradient介绍

  css gradient能够渲染两个颜色之间的平滑渐变，分为两种，linear-gradient线性渐变,radial-gradient径向渐变。本文介绍linear-gradent线性渐变的语法和使用。

linear gradient 语法

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

linear-gradient 参数解释

direction方向

direction渐变方可可以是方向的枚举值，有两个参数，第一个是横向的，第二个是纵向的。

.linear-cont{
    height:300px;
    background:-webkit-linear-gradient(left top,#1E66B8,#B7AD05);
  }

一定要加前缀，-webkit，-moz,-o,-ms。不加前缀可能有一些写法就不支持。

效果如下：

使用方向枚举值的两个参数都是可选的，你可以填一个，也或者两个都不填，不填的时候默认是"to bottom",

枚举值前面还可以加一个“to”,如下：

.linear-cont{
    height:300px;
    background:-webkit-linear-gradient(to right bottom,#1E66B8,#B7AD05);
  }

在方向前面加“to”是规范，加上to 就像表示渐变向什么方向去，不加“to”就相当于from，从什么方向开始渐变。

上面的to right bottom和 left top的渐变方向是一直的，而默认的“to bottom” 也就相当于 “top”，从上往下的竖向渐变。

一个有4个方向值：left ,right,top,bottom.

direction的渐变的方向，可以是一个角度，支持deg，rad等单位

.linear-cont{
    height:300px;
    background:linear-gradient(30deg,#1E66B8,#B7AD05);
  }

效果如下：

deg角度的方向时，0deg是从下往上的渐变，跟枚举值的方向是相反的，所以旋转30deg是从偏左下角可是渐变的。角度旋转都是沿着顺时针方向的。

color-stop参数

color-stop参数的语法如下

color-stop=color [length/percent]

一个颜色值，后面可以跟一个此颜色的结束位置，如果没有辞职那么一个color-stop就会从50%位置分割。

.linear-cont{
    height:300px;
    background: linear-gradient(#1E66B8 120px,#19CF8D80%,#CF19C9);
}

效果如下：

linear-gradient实现隔行变色的功能

通过上面color-stop的length特性我们可以实现隔行变色的功能。配合background-size属性来实现。

.linear-cont{
    height:300px;
    background: linear-gradient(#1E66B8,#1E66B8 50%,#CF19C9 50%,#CF19C9) repeat-y;
    background-size:100% 50px;
}

效果如下：

效果妥妥的，perfect。

注意这里的background-size，设置了背景色的高度是50px，所以渐变色的一栏高度是50/2=25px。

notes:使用background-size设置背景色大小的时候，color-stop里的宽度最好不要用固定数值（比如px，em等），最好用百分比，相对于background-size的大小。