linear-gradient渐变

dreaming.

浏览: 23235 次
性别:
来自: 西安

最近访客更多访客>>

wanghui_java

feitingbo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

渐变色在开发中是经常使用的，下面介绍了各个浏览器下的不同写法。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>linear-gradient()_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<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>

分享到：

CSS网页布局时常犯的10个小错误 | IE6下解决text-align:center

2014-05-15 10:21
浏览 342
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论