欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » Html » 正文

热门阅读

利用CSS3在IE中实现圆角的方法

创建时间:2012年02月29日 15:14  阅读次数:(6213)
分享到:
在IE中,我们要实现圆角,通常我们会采用图片的方法,那么我们可不可以直接使用CSS,而不用图片来解决这个问题呢?

本章我们就介绍一个如何在IE中利用CSS3在网页中实现圆角的方法。
需要大家注意的是,IE6,IE7,IE8都不支持对CSS3的解析,只有IE9才开始支持对CSS3的解析。但让上述版支持CSS3的解析的方法也比较多,我们下面就介绍其中一种。

在这之前,我们需要下载一个文件来测试服务器是否有正确的content-type,只有这个测试文件通过了,才能使用这个方法来实现圆角。注意,这是测试服务器,而不是客户端,所以大家不用担心客户的问题。

文件的下载地址:http://www.rayfile.com/files/ff9b41e8-ab19-11e0-be40-0015c55db73d/

这个文件包里面有一个微软的脚本文件和一个用来测试服务器是否有正确的Content-Type的HTML文件:.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。

下载后,打开里面的test.html文件,如果你看到是圆角,则表示成功了。

然后我们添加一个样式,来做一个测试。
<html>
<head><title>测试主机Content-Type</title>
<style type="text/css">
.test {
width:560px;
height:400px;
background-color: blue;
padding:10px 8px 6px; 
border: 2px solid #C0C0C0; 
margin-bottom:10px;
border-radius: 10px;
behavior: url(ie-css3.htc); //在你们的文件中,这里要改为你们的htc文件的地址。
}
</style>
</head>
<body>
<div class="test">
这个是测试文件
</div>
</body>
</html>

复制代码,保存为html文件,打开,是不是出现期待已久的圆角的div了呢。
注意:behavior的url里一定要填写ie-css3.htc的绝对路径。

呵呵, 很简单吧,大家试一下吧。
来源:
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 92+17=? 的结果(结果是:109)
结  果: