<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。
GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。*/
div {
margin-bottom:10px;
border:2px solid #000;
width:200px;
height:100px;
float:left;
margin-right:10px;
}
.box {
width:200px;
height:100px;
background:-moz-linear-gradient(left,#000,#f00);
background:-webkit-gradient(linear,left top,right bottom,from(#000),to(#f00));
background:-webkit-linear-gradient(left,#000,#f00);
background:-o-linear-gradient(left,#000,#f00);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#f00, endColorstr=#000);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#f00, endColorstr=#000)";/*IE8+*/
}
/*1、开始于center（水平方向）和top（垂直方向）也就是Top → Bottom：*/
.box1 {
width:200px;
height:100px;
/*background:-webkit-linear-gradient(top,#ffffc7,#019934);*/
background:-moz-linear-gradient(top,#ffffc7,#019934);
background:-webkit-gradient(linear,top,from(#ffffc7),to(#019934));
background:-webkit-linear-gradient(top,#ffffc7,#019934);
background:-o-linear-gradient(top,#ffffc7,#019934);
background:linear-gradient(top,#ffffc7,#019934);
}
/*3、起始于left（水平方向）和top（垂直方向）:*/
.box3 {
width:200px;
height:100px;
background:-moz-linear-gradient(left top,#cd0069,#009997);
background:-webkit-linear-gradient(left top,#cd0069,#009997);
background:-o-linear-gradient(left top,#cd0069,#009997);
background:linear-gradient(left top,#cd0069,#009997);
}
/*with Specified Arbitrary Stops：*/
.box5 {
width:200px;
height:100px;
background:-moz-linear-gradient(left,#ace,#f96,#ace,#f96);
/*background:-webkit-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);*/
background:-webkit-gradient(linear,left top,right bottom,from(#ace),color-stop(0.25,#f96),color-stop(0.5,#ace),color-stop(0.75,#f96),to(#ace));
background:-o-linear-gradient(left,#ace,#f96,#ace,#f96);
background:linear-gradient(left,#ace,#f96,#ace,#f96)
}
/*6、角度(Angle)：
正如上面看到的示例，如果您不指定一个角度，它会根据起始位置自动定义。
如果你想更多的控制渐变的方向，您不妨设置角度试试。例如，下面的两个渐
变具有相同的起点left center，但是加上一个30度的角度。*/
.deg0 {
background: -moz-linear-gradient(0deg, #ace, #f96);
background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
background: -webkit-linear-gradient(0deg, #ace, #f96);
background: -o-linear-gradient(0deg, #ace, #f96);
}
.deg45 {
background: -moz-linear-gradient(45deg, #ace, #f96);
background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
background: -webkit-linear-gradient(45deg, #ace, #f96);
background: -o-linear-gradient(45deg, #ace, #f96);
}
.deg90 {
background: -moz-linear-gradient(90deg, #ace, #f96);
background: -webkit-gradient(linear,50% 100%,50% 0%,from(#ace),to(#f96));
background: -webkit-linear-gradient(90deg, #ace, #f96);
background: -o-linear-gradient(90deg, #ace, #f96);
}
.deg135 {
background: -moz-linear-gradient(135deg, #ace, #f96);
background: -webkit-gradient(linear,100% 100%,0 0,from(#ace),to(#f96));
background: -webkit-linear-gradient(135deg, #ace, #f96);
background: -o-linear-gradient(135deg, #ace, #f96);
}
.deg180 {
background: -moz-linear-gradient(180deg, #ace, #f96);
background: -webkit-gradient(linear,100% 50%,0 50%,from(#ace),to(#f96));
background: -webkit-linear-gradient(180deg, #ace, #f96);
background: -o-linear-gradient(180deg, #ace, #f96);
}
.deg360 {
background: -moz-linear-gradient(360deg, #ace, #f96);
background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
background: -webkit-linear-gradient(360deg, #ace, #f96);
background: -o-linear-gradient(360deg, #ace, #f96);
}
.imgs {
width:200px;
height:100px;
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(logo.png);
background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(logo.png);
background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(logo.png);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box3"></div>
<div class="box5"></div>
<div class="deg0">deg0</div>
<div class="deg45">deg45</div>
<div class="deg90">deg90</div>
<div class="deg135">deg135</div>
<div class="deg180">deg180</div>
<div class="deg360">deg360</div>
<div class="imgs">pics</div>
</body>
</html>