IE8中如何用css实现round corner

penny.gu 发布于 2012/07/17 14:37
阅读 1K+
收藏 0

网页块级元素内容边框显示round corner而不是单纯的矩形,比如

<head><style type="text/css">.test{width=100px; height=100px; backgroud:green; }</style>

......相关的css代码......</head>

<body><div class="test">test</div>

</body>

加载中
0
曾沙
曾沙

之前用过一个添加.htc文件的方法,这是我网上找的一个实例,测试过了:

1、下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar;.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能。

解压后,打开test.html,如果显示效果是圆角,则可以继续。

使用演示:

.main{
border: 2px solid #C0C0C0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position:relative;
z-index:2;
behavior: url(此处为ie-css3.htc文件的绝对路径);
}

Webkit内核的浏览器支持“-webkit-border-radius: 10px;”属性(10px是圆角半径),可以直接解析出圆角;Firefox浏览器支持“-moz-border-radius: 10px;”属性,也是可以直接解析出圆角;IE系浏览器则需要加上“border-radius: 15px;”的属性。

penny.gu
penny.gu
真的有用,非常感谢!IE8不支持css3,本想下载jquery round corner plugin试试。这个.htc文件支持就好了。虽然对这个.htc文件不甚了解,但是效果很好。
返回顶部
顶部