css3 颜色渐变

有时候css3属性不常用的话容易忘记，在此记录一下，便于以后翻阅~

1.线性渐变 - 从上到下：

.grad1 {
    height: 100px;
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
}

2.线性渐变 - 从左到右

.grad1 {
    height: 100px;
    background: -webkit-linear-gradient(, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(to right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(to right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */
}

3.线性渐变 - 对角:从左上角开始（到右下角）的线性渐变

.grad1 {
    height: 100px;
    background: -webkit-linear-gradient(to bottom right, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(to bottom right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(to bottom right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */
}

4.线性渐变 - 使用不同的角度

.grad1 {
    height: 100px;
    background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(0deg, red, blue); /* 标准的语法（必须放在最后） */
}

5.彩虹制作：

.grad1 {
    height: 55px;
    background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}

6.重复的线性渐变:

.grad1 {
    height:100px;
    background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
    background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
    background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法（必须放在最后） */
}

7.径向渐变 - 颜色结点均匀分布

.grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red, green,yellow); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, green,yellow); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, green,yellow); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, green,yellow); /* 标准的语法（必须放在最后） */
}

8.径向渐变 - 颜色结点不均匀分布

.grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
    background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */
}

9.圆形 Circle：

.grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
    background: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */
}

注意： Internet Explorer 9 及之前的版本不支持渐变。