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）