渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡

线性渐变（linear-gradients）

• 从左到右

• 从上到下

• 从下到上

• 从右到左

• 可以对角线

• 使用角度

是沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变（从一边拉向另一边）

语法

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

默认方向为从上到下

注意：渐变方向为从左到右或从右至左甚至于从左上角到右下角时，渐变方向的写法（不用角度），例从左到右

• Google：开始的方向，left

• Firefox：最后的方向，right

• opera：最后的方向，right

• 标准：to 最后的方向，to right

线性渐变--使用角度

语法

background：linear-gradients(angle, color-stop1, color-stop2,...);

角度说明

0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变，随着度数增加顺时针旋转

只写 Google 浏览器的渐变时，webkit 内核下，0deg 将创建一个从左往右的建斌啊，90deg 将创建一个从下到上的渐变，随着角度增加逆时针旋转（一般不用在意）

颜色节点

background：linear-gradient(direction, color-stop1 | percentage, color-stop2 | percentage,...);

线性渐变--重复渐变

语法

background：repeating-linear-gradient(direction, color-stop1 | percentage, color-stop2 | percentage,...);

径向渐变（radial gradient）

从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）

语法

background：radial-gradient(origin, shape size, start-color,..., last-color);

默认颜色节点均匀分布

径向渐变--颜色节点不均匀分布

background：radial-gradient(color-stop1 | percentage, color-stop2 | percentage,...);

径向渐变--设置形状

background：radial-gradient(origin, shape size, start-color,..., last-color);

形状说明

• circle —— 圆形

• ellipse —— 椭圆（默认）

如果元素宽和高设置一样，则形状为圆形

径向渐变--尺寸大小关键字

background：radial-gradient(origin, shape size, start-color,..., last-color);

关键字说明

• closest-side：最近边

• farthest-side：最远边

• closest-corner：最近角

• farthest-corner：最远角

origin 属性

第一个值为水平方向，第二个值为竖直方向，以左上角为原点

径向渐变

background：repeating-radial-gradient(color-stop1 percentage, color-stop2 percentage,...);

其他渐变

Internet Explorer 渐变

语法

filter:progid:DXImageTranform.Microsoft.gradient( startColorstr ='startColor', endColorstr='endColor', GradientType = 0 );