webkit 渐变

<div class="c" style="background-image: linear-gradient(to left,#000,#666);">-WebKit-gradient(<type>, <point> [,
    <radius>]?,<point>[,<radius>]?[,<stop>]* )
  </div>

div {
  width: 400px;
  height: 200px;
  border: 2px solid #fcf;
  padding: 4px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(blue),
    to(red)
  );
  -webkit-background-origin: padding-box;
  -webkit-background-clip: content-box;
}

div {
  width: 400px;
  height: 200px;
  border: 2px solid #fcf;
  padding: 4px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(blue),
    to(red),
    color-stop(50%, green)
  );
  -webkit-background-origin: padding-box;
  -webkit-background-clip: content-box;
}

div {
  width: 400px;
  height: 200px;
  border: 2px solid #fcf;
  padding: 4px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(blue),
    to(red),
    color-stop(0.5, #fff),
    color-stop(0.5, #000)
  );
  -webkit-background-origin: padding-box;
  -webkit-background-clip: content-box;
}

-moz-linear-gradient([<point> |<angle>, ]?<stop>, <stop>[, <stop>] *);

div {
  width: 400px;
  height: 200px;
  border: 2px solid #fcf;
  padding: 4px;
  background: -moz-linear-gradient(red, blue);
}

div {
  width: 400px;
  height: 200px;
  border: 2px solid #fcf;
  padding: 4px;
  background: -moz-linear-gradient(top left, red, rgba(255, 0, 0, 0));
}

div {
  width: 400px;
  height: 200px;
  border: 2px solid #fcf;
  padding: 4px;
  background: -moz-linear-gradient(
    left,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

-moz-radial-gradient([<position>|
|<angle>,]?[<shape>|
|<size>,]?<stop>,<stop>[,<stop>]*)

div {
  width: 400px;
  height: 200px;
  border: 2px solid #fcf;
  padding: 4px;
  background: -moz-radial-gradient(bottom left, red, yellow, blue 80%);
}

filter: progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth);

body {
  /*让渐变背景填满整个页面*/
  padding: 1em;
  margin: 0; /*为网页设计垂直渐变背景*/
  filter: progid: DXImageTransform.Microsoft.Gradient(gradientType=0,
    startColorStr=#9999FF, endColorStr=#ffffff);
} /* 定义标题样式 */
h1 {
  color: white;
  font-size: 18px;
  height: 45px;
  padding-left: 3em;
  line-height: 65px; /* 控制文本显示位置 */
  border-bottom: solid 2px #c72223; /*为标题插入一个装饰图标*/
  background: url(images/icon4.png) no-repeat left center;
}
.box {
  background: url(images/bg5.png) no-repeat right bottom; /* 设计插画背景 */
}
p {
  text-indent: 2em;
}

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

div {
  width: 400px;
  height: 200px;
  border: 2px solid #fcf;
  padding: 4px;
  background-image: linear-gradient(to bottom, yellow, blue 30%, red);
}

radial-gradient([[<shape>|
|<size>][at <position>]?,| at
    <position>,]?<color-stop>[,<color-stop>]+)