CSS3笔记——渐变

概念

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

兼容性：

IE10+、Chrome10、FireFox3.6、Safari5.1、Opear 11.6

线性渐变

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

从上到下（默认）

语法：（前缀不同，其他一致）

background：linear-gradient (color1, color2, ...)    

实例：

            background: -webkit-linear-gradient(white,blue);

            background:    -moz-linear-gradient(white,blue);

            background:      -o-linear-gradient(white,blue);

            background:         linear-gradient(white,blue);

从左到右

语法：

            background: -webkit-linear-gradient(开始方向, color1, color2, ...);

            background:    -moz-linear-gradient(结束方向,color1, color2, ...);

            background:      -o-linear-gradient(结束方向,color1, color2, ...);

            background:         linear-gradient(to 结束方向,color1, color2, ...);

实例：

            background: -webkit-linear-gradient(left,red,blue);

            background:    -moz-linear-gradient(right,red,blue);

            background:      -o-linear-gradient(right,red,blue);

            background:         linear-gradient(to right,red,blue);

对角

语法：

            background: -webkit-linear-gradient(开始角, color1, color2, ...);

            background:    -moz-linear-gradient(结束角,color1, color2, ...);

            background:      -o-linear-gradient(结束角,color1, color2, ...);

            background:         linear-gradient(to 结束方向,color1, color2, ...);

实例：

            background: -webkit-linear-gradient(       left top, red, yellow, blue);

            background:    -moz-linear-gradient(   right bottom, red, yellow, blue);

            background:      -o-linear-gradient(   right bottom, red, yellow, blue);

            background:         linear-gradient(to right bottom, red, yellow, blue);

角度

语法：（前缀不同，其他一致）

background: linear-gradient(角度,color1, color2, ...);

角度说明



实例：

            background: -webkit-linear-gradient(135deg, red, yellow, blue);

            background:    -moz-linear-gradient(135deg, red, yellow, blue);

            background:      -o-linear-gradient(135deg, red, yellow, blue);

            background:         linear-gradient(135deg, red, yellow, blue);

颜色结点

颜色结点指的是，在指定的范围出现最纯的指定颜色。

使用百分比值，控制颜色长度，从0%到100%。

第一个颜色不写，默认0%；最后一个不写，默认100%。


语法：（前缀不同，其他一致）

background: linear-gradient(color1 %, color2 %, ...);

实例：

    background: -webkit-linear-gradient(90deg, red 0%, yellow 30%, blue);

    background:    -moz-linear-gradient(90deg, red 10%, yellow 30%, blue);

    background:      -o-linear-gradient(90deg, red 10%, yellow 30%, blue);

    background:         linear-gradient(90deg, red 00%, yellow 30%, blue);

重复

语法：（前缀不同，其他一致）

background: repeating-linear-gradient(角度,color1, color2, ...);

实例：

    background: -webkit-repeating-linear-gradient(90deg, red 0%, yellow 10%, blue 20%);

    background:    -moz-repeating-linear-gradient(90deg, red 10%, yellow 10%, blue 20%);

    background:      -o-repeating-linear-gradient(90deg, red 10%, yellow 10%, blue 20%);

    background:         repeating-linear-gradient(90deg, red 00%, yellow 10%, blue 20%);

径向渐变

颜色从内向外进行圆形渐变

颜色结点均匀分布（默认）

语法：（前缀不同，其他一致）

background: radial-gradient(color1,color2...)

颜色结点不均匀分布

使用百分比值，控制颜色长度，从0%到100%。

第一个颜色不写，默认0%；最后一个不写，默认100%。

语法：（前缀不同，其他一致）

background: radial-gradient(color1 %, color2 %, ...);

设置形状

语法：（前缀不同，其他一致）

background: radial-gradient(形状，color1, color2, ...);

形状说明：

cirle —— 圆形

ellipse —— 椭圆（默认）

重复

语法：（前缀不同，其他一致）

background: repeating-radial-gradient(color1 %, color2 %, ...);