设为首页收藏本站关注微信<<< 抵制 IE6 人人有责 >>>
搜索
热搜: 活动 交友 discuz
查看: 2392|回复: 0
打印 上一主题 下一主题

[CSS3] CSS设置DIV背景色渐变显示

[复制链接]
跳转到指定楼层
楼主
发表于 2015-11-26 21:12:22 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
[HTML] 纯文本查看 复制代码
<style type="text/css">
.linear {
	width: 100%;
	height: 600px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#b8c4cb, endColorStr=red); /*IE 6 7 8*/
	background: -ms-linear-gradient(top, #fff, #0000ff);        /* IE 10 */
	background: -moz-linear-gradient(top, #b8c4cb, #f6f6f8);/*火狐*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8));/*谷歌*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff));      /* Safari 4-5, Chrome 1-9*/
	background: -webkit-linear-gradient(top, #fff, #0000ff);   /*Safari5.1 Chrome 10+*/
	background: -o-linear-gradient(top, #fff, #0000ff);  /*Opera 11.10+*/
}
</style>
<body>
<div class="linear"></div>
</body>

FILTER(ie模式);background:-moz-linear-gradient(火狐模式);background:-webkit-gradient(谷歌模式)。

以上是为了区别不同浏览器的不同效果,我把色码区别开了。为了兼容所有浏览器的相同效果的css3渐变色,你可以把色码调试成一样。

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享淘帖
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|手机版|Archiver|源于生活(个人生活娱乐工作的笔记)css3,html5,学习笔记    

GMT+8, 2024-11-24 00:49 , Processed in 0.062400 second(s), 24 queries .

Powered by Mr.Kevin-ying

© 2004-2015

快速回复 返回顶部 返回列表