在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的绝对路径。
呵呵, 很简单吧,大家试一下吧。