您的位置:知蚁博客 » 程序设计 » HTML元素在IE中实现圆角的方法

HTML元素在IE中实现圆角的方法

作者: 发布时间:2011-05-04 分类:程序设计 标签: 5,818人浏览

  网页制作中,我们常常喜欢让某一块区域显示成圆角,为了兼容各种浏览器,通常的做法是用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中添加:

CSS语言: 知蚁博客 程序设计
<style type=“text/css”>
.test {
    width:200px;
    height:100px;
    background-color: blue;
    border-radius: 10px;
    behavior: url(ie-css3.htc);/*ie-css3.htc与html文件在同一文件夹下*/
}
</style>

body中添加:

CSS语言: 知蚁博客 程序设计
<div class=“test”></div>
<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.jsjquery.corner.js下载下来,然后在htm文件中调用,就可以对相应的html元素设置圆角了。下面给一个具体的例子:
新建一个html文件,body中添加:

HTML语言: 知蚁博客 程序设计
<script type=‘text/javascript’ src=‘jquery-1.5.1.min.js’></script>
<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

相关文章

8访客评论 ,博主回复2

  1. 学习了!

    石头05-05 08:40 回复
  2. 如此详细,怎能不感谢呢?多谢。

    敖东05-05 09:56 回复
    • 不客气,呵呵,多谢支持!

      知蚁05-05 23:17 回复
  3. 学习了,呵呵

    远走高飞05-05 12:00 回复
  4. 谢谢提供,呵呵

    太子虹05-05 18:06 回复
  5. 又学了一招.路还长,我得慢慢消化啊.

    1000china05-16 14:13 回复
  6. CSS3实现这个比较简单,但CSS2以前的就比较麻烦了!

    ixwebhosting05-25 20:10 回复
    • wordpress马上就不支持ie6了,css3离我们不远了

      知蚁05-25 21:11 回复
  7. 非常感谢!解决了困扰我2天的问题

    米饭06-17 10:45 回复
  8. 按照楼主的去做了,为什么在IE6、7下还是不行呢

    MI12-20 10:55 回复

我来说说

(必须)

(必须,保密)

你确定你已经看过文章了?
取消

无觅相关文章插件,快速提升流量