CSS3背景线性渐变 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS3背景线性渐变</title>
<style>
div {
    width: 200px;
    height: 100px;
    margin-top: 10px;
    border: 1px solid #ddd;
}
.test {
    background: -moz-linear-gradient(#fff, #333);
    background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#333));
    background: -webkit-linear-gradient(#fff, #333);
    background: -o-linear-gradient(#fff, #333);
    background: -ms-linear-gradient(#fff, #333);
    background: linear-gradient(#fff, #333);
}
.test2 {
    background: -moz-linear-gradient(#000, #f00 50%, #090);
    background: -webkit-gradient(linear, center top, center bottom, from(#000), color-stop(.5, #f00), to(#090));
    background: -webkit-linear-gradient(#000, #f00 50%, #090);
    background: -o-linear-gradient(#000, #f00 50%, #090);
    background: -ms-linear-gradient(#000, #f00 50%, #090);
    background: linear-gradient(#000, #f00 50%, #090);
}
.test3 {
    background: -moz-linear-gradient(left center, #000 20%, #f00 50%, #090 80%);
    background: -webkit-gradient(linear, left center, right center, color-stop(.2, #000), color-stop(.5, #f00), color-stop(.8, #090));
    background: -webkit-linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);
    background: -o-linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);
    background: -ms-linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);
    background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);
}
.test4 {
    background: -moz-linear-gradient(45deg, #000, #f00 50%, #090);
    background: -webkit-gradient(linear, left bottom, right top, from(#000), color-stop(.5, #f00), to(#090));
    background: -webkit-linear-gradient(45deg, #000, #f00 50%, #090);
    background: -o-linear-gradient(45deg, #000, #f00 50%, #090);
    background: -ms-linear-gradient(45deg, #000, #f00 50%, #090);
    background: linear-gradient(45deg, #000, #f00 50%, #090);
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
</body>
</html>

IE 10 下的效果：（其他浏览器都一样的效果）

posted @ 2013-03-08 16:40  海阔天空XM  阅读(425)  评论(0)  编辑  收藏  举报