您的位置：首页 > Web前端 > CSS

htmlcss渐变及兼容性

2015-11-26 11:16 507 查看

自我总结，欢饮拍砖.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
#div1{ width:300px; height:300px; border: 1px solid black;}
.gradient{
background:-webkit-linear-gradient(top,#FFFFFF,#d33027); /*以webkit浏览器引擎为基础的浏览器可以识别:chrome,opera , safari*/
background:-moz-linear-gradient(top,#FFFFFF,#d33027); /*支持火狐浏览器*/
background:-ms-linear-gradient(top,#FFFFFF,#d33027); /*支持ie10及ie以上版本*/
background:linear-gradient(top,#FFFFFF,#d33027);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#d33027)"; /*支持ie8,9*/
+background:#eca7a3; /*ie6,,ie7不支持，则取中间色*/
}
</style>
</head>
<body>
<div id="div1" class="gradient"></div>
</body>

</html>

参考自：梦想天空 http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航