网页制作中,我们常常喜欢让某一块区域显示成圆角,为了兼容各种浏览器,通常的做法是用CSS+图片来实现。那么有没有不用图片的更快捷的方法呢?有!星石在这里介绍2种方法:
方法1:CSS3的border-radius属性+htc文件
Mozilla Firefox、Google Chrome、Opera都支持CSS3的border-radius属性,但是IE(6、7、8)不支持。那IE怎么实现圆角呢?对了,就是htc文件。htc的全称是Html Components,由微软在IE5.0后开始提供的一种新的指令组合,它可以把某种特定功能的代码封装在一个组件之中,从而实现了代码的重复使用。下面的网址就是高手编写的令IE实现圆角的htc文件:http://fetchak.com/ie-css3/ie-css3.htc。将ie-css3.htc文件下载下来,放到一个让CSS便于调用的位置,然后在CSS中加上behavior: url(ie-css3.htc路径);。下面给出一个具体的例子:
新建一个html文件,head中添加:
.test {
width:200px;
height:100px;
background-color: blue;
border-radius: 10px;
behavior: url(ie-css3.htc);/*ie-css3.htc与html文件在同一文件夹下*/
}
</style>
body中添加:
<p class=“test”></p>
<span class=“test”></span>
保存并浏览文件,是不是能看到3个圆角的蓝色块了?\(^o^)/~
顺便说下,ie-css3.htc还可以实现IE的阴影效果,与实现圆角的方法类似,在CSS中添加如下代码:
box-shadow: 10px 10px 20px #000;/*Mozilla Firefox、Google Chrome、Opera*/
behavior: url(ie-css3.htc);/*IE*/
方法2:jQuery的插件jQuery Corner
该插件有一个Demo网页,地址是:http://jquery.malsup.com/corner/。由Demo可见,该插件可以实现多种圆角形式。将jquery.js和jquery.corner.js下载下来,然后在htm文件中调用,就可以对相应的html元素设置圆角了。下面给一个具体的例子:
新建一个html文件,body中添加:
<script type=‘text/javascript’ src=‘jquery.corner.js’></script>
<div class=“test_js” style=“width:200px;height:100px;background-color: green;”></div>
<p class=“test_js” style=“width:200px;height:100px;background-color: green;”></p>
<span class=“test_js” style=“width:200px;height:100px;background-color: green;”></span>
<script type=“text/javascript”>
$(‘.test_js’).corner(’10px’);
</script>
保存并浏览文件,是不是能看到3个圆角的绿色块了?\(^o^)/~
不用图片实现的圆角,改起颜色来可方便多咯!代码也简洁许多。
有一点需要说明的是,以上2种方法都不支持HTML5新增的标签,如article、section等,但对于当前的HTML4来说是可以正常使用的。
O(∩_∩)O~,欢迎大家来交流。
原创文章请注明转载于知蚁博客,本文地址:http://www.letuknowit.com/archives/70
学习了!
如此详细,怎能不感谢呢?多谢。
不客气,呵呵,多谢支持!
学习了,呵呵
谢谢提供,呵呵
又学了一招.路还长,我得慢慢消化啊.
CSS3实现这个比较简单,但CSS2以前的就比较麻烦了!
wordpress马上就不支持ie6了,css3离我们不远了
非常感谢!解决了困扰我2天的问题
按照楼主的去做了,为什么在IE6、7下还是不行呢