兼容IE6，IE7，IE8，friefox，chreom浏览器圆角及颜色渐变效果

最新推荐文章于 2025-12-05 12:53:34 发布

转载最新推荐文章于 2025-12-05 12:53:34 发布 · 350 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/websjy/archive/2011/02/18/1957889.html

文章标签：

#php

这个大家可能也用到过了，今天再次与大家分享下，此效果是运用了CSS3中部分样式，目前兼容IE6，IE7，IE8，friefox，chreom浏览器；
代码演示：

html >
< head >< title > 测试主机Content-Type </ title >
< style type ="text/css" >
.test {
width : 560px ;
height : 400px ;
background-color : #FFFFFF ;
padding : 10px 8px 6px ;
border : 1px solid #000 ;
margin-bottom : 10px ;
/* 圆角 */
border-radius : 5px ; /* IE6，值的大小可改变角弧度的大小 */
behavior : url(http://share.job9151.com/ie-css3.htc) ; /* IE6 */
-moz-border-radius : 5px ; -webkit-border-radius : 5px ; /* 非IE6的其它值的大小可改变角弧度的大小 */
/* 渐变 */
FILTER : progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8) ; /* IE6 */
background : -moz-linear-gradient(top,#b8c4cb,#f6f6f8) ; /* 非IE6的其它 */
background : -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8)) ; /* 非IE6的其它 */
}
</ style >
</ head >
< body >
< div class ="test" >
这个页面是用以测试主机是否有正确的content-type。
</ div >
</ body >
</ html

下载htc 文件及演示页面： iecss3.rar (4.16 KB)

要是在IE6中没有效果，可能需要将htc文件下载到根据目录下

原文：http://www.websjy.com/bbs/viewthread.php?tid=9968

转载于:https://www.cnblogs.com/websjy/archive/2011/02/18/1957889.html