码迷,mamicode.com
首页 > Web开发 > 详细

div+css背景渐变色代码示例

时间:2015-12-31 12:27:12      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:

用CSS使DIV背景颜色渐变,适用于IE和Chrome等浏览器。

代码如下:

 <style type="text/css">
.jbkeleyi{
height: 300px;
width:100px;
margin:0px auto;
background-image: -moz-linear-gradient(top, #F00, #000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00FF00), color-stop(1,#FF0000));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#00FF00‘, endColorstr=‘#FF0000‘, GradientType=‘0‘);
}
</style>
</head>
<body>
用CSS是div颜色渐变:<br />
<div class="jbkeleyi">从绿到红<br /><br />keleyi.com</div>

 

效果图:
技术分享

另外多浏览器兼容代码:

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8);    /*IE*/

background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/

background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8));/*谷歌*/

div+css背景渐变色代码示例

标签:

原文地址:http://www.cnblogs.com/mmx-jiayou/p/5091008.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!