CSS3属性之线性渐变

名称：linear-gradient

语法如下：

-webkit-gradien(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)  // webkit老式语法

-webkit-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)  // webkit语法

-moz-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)  // Gecko语法

-o-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)  // Presto语法

linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)  // W3C语法

说明：语法基本划分3种，一种是webkit的老式语法，一种是Webkit、webkit、Presto的语法(加上各自的私有属性，语法都一样)、一种是W3C的语法（目前个各浏览器最新版基本都支持），虽然语法不一致，但包括的参数基本一致，如渐变的方向以及渐变断点的位置及颜色。

一些demo：

html代码：

<div class="linear-gradient1">从左到右</div><div class="linear-gradient2">从右到左</div><div class="linear-gradient3">从上到下</div><div class="linear-gradient4">从下到上</div><div class="linear-gradient5">从左到右,多色渐变</div><div class="linear-gradient6">多色渐变,指定颜色范围</div><div class="linear-gradient7">重复渐变-1</div><div class="linear-gradient8">重复渐变-2</div>

css代码：

div {  width: 160px;  height: 80px;  margin: 10px;  border: 1px solid black;  line-height: 80px;  text-align: center;  font-size: 12px;}.linear-gradient1 {  background-image: -webkit-gradient(linear, left center, right center, color-stop(0%, red), color-stop(100%, white));  background-image: -webkit-linear-gradient(left, red, white);  background-image: -moz-linear-gradient(left, red, white);  background-image: -o-linear-gradient(left, red, white);  background-image: linear-gradient(to right, red, white);}.linear-gradient2 {  background-image: -webkit-gradient(linear, right center, left center, color-stop(0%, red), color-stop(100%, white));  background-image: -webkit-linear-gradient(right, red, white);  background-image: -moz-linear-gradient(right, red, white);  background-image: -o-linear-gradient(right, red, white);  background-image: linear-gradient(to left, red, white);}.linear-gradient3 {  background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0%, red), color-stop(100%, white));  background-image: -webkit-linear-gradient(top, red, white);  background-image: -moz-linear-gradient(top, red, white);  background-image: -o-linear-gradient(top, red, white);  background-image: linear-gradient(to bottom, red, white);}.linear-gradient4 {  background-image: -webkit-gradient(linear, center bottom, center top, color-stop(0%, red), color-stop(100%, white));  background-image: -webkit-linear-gradient(bottom, red, white);  background-image: -moz-linear-gradient(bottom, red, white);  background-image: -o-linear-gradient(bottom, red, white);  background-image: linear-gradient(to top, red, white);}.linear-gradient5 {  background-image: -webkit-gradient(linear, left center, right center, color-stop(0%, red), color-stop(25%, green), color-stop(50%, blue), color-stop(75%, orange), color-stop(100%, white));  background-image: -webkit-linear-gradient(left, red, green, blue, orange, white);  background-image: -moz-linear-gradient(left, red, green, blue, orange, white);  background-image: -o-linear-gradient(left, red, green, blue, orange, white);  background-image: linear-gradient(to right, red, green, blue, orange, white);}.linear-gradient6 {  background-image: -webkit-gradient(linear, left center, right center, color-stop(0%, red), color-stop(40%, green), color-stop(50%, blue), color-stop(60%, orange), color-stop(100%, white));  background-image: -webkit-linear-gradient(left, red 0%, green 40%, blue 50%, orange 60%, white 100%);  background-image: -moz-linear-gradient(left, red 0%, green 40%, blue 50%, orange 60%, white 100%);  background-image: -o-linear-gradient(left, red 0%, green 40%, blue 50%, orange 60%, white 100%);  background-image: linear-gradient(to right, red 0%, green 40%, blue 50%, orange 60%, white 100%);}.linear-gradient7 {  background-image: -webkit-repeating-linear-gradient(left, red 0, red 14px, white 15px, white 29px);  background-image: -moz-repeating-linear-gradient(left, red 0, red 14px, white 15px, white 29px);  background-image: -o-repeating-linear-gradient(left, red 0, red 14px, white 15px, white 29px);  background-image: repeating-linear-gradient(to right, red 0, red 14px, white 15px, white 29px);}.linear-gradient8 {  background-image: -webkit-repeating-linear-gradient(45deg, red 0, red 14px, white 15px, white 29px);  background-image: -moz-repeating-linear-gradient(45deg, red 0, red 14px, white 15px, white 29px);  background-image: -o-repeating-linear-gradient(45deg, red 0, red 14px, white 15px, white 29px);  background-image: repeating-linear-gradient(45deg, red 0, red 14px, white 15px, white 29px);}

效果：

兼容性：（来自http://caniuse.com）