西门的后花园

一个热爱网络的年轻人的博客

使用IE圆角border-radius.htc时的优点和缺点

之前在写聊IT评论网的模板时,因为想美化一下网页的圆角,所以果断使用CSS3这种最方便也最为简单的方法。但firefox和webkit内核的浏览器用CSS3可以实现,但是IE这边就不行,所以只有另寻方法。

之前群里有人提到border-radius.htc方法来实现IE圆角,我当时简单的写了demo也觉得还不错,结果实际用到网站上,才发现没有那么完美。使用border-radius.htc,只需在相应的位置多加一段behavior:url(border-radius.htc);即可,非常简单。DEMO

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
behavior:url(border-radius.htc);

那么现在就把使用border-radius.htc的优点和缺点列举出来。

优点:

一、最为方便让IE实现圆角;

二、体积小,border-radius.htc才4.77kb,CSS里用到的代码也才一排。

缺点:

一、只能同时4角圆角,不能单独设置;

二、div上可以正常使用,测试text文本框,会出现异常;

三、CSS文件要和页面在同一目录下,否则无效

第三点最为蛋疼。因为当时写demo的时候,都会忽略这个问题。一般人写demo肯定会把样式表写到页面里面,或者在页面的根目录建立样式表。在页面里写样式只有一个文件,容易删除。但是实际操作的时候,你的样式表不可能放到根目录吧?肯定是放到CSS专门的目录里面。这个时候border-radius.htc就失效了。看DEMO

解决的办法我目前就知道一个,就是在样式表里,把behavior:url(border-radius.htc);相对路径改成绝对路径behavior:url(https://ximan.org/wp-content/uploads/2011/02/border-radius/css/border-radius.htc);,看DEMO

所以现在聊IT评论网里只用了一处border-radius.htc圆角,因为其他地方要么是2个圆角,要么是文本框,根本用不了。

希望有通用JavaScript实现圆角的朋友,给个demo网址我,我改用JavaScript算了,不想用图片。JavaScript不要大于50K的,那种我找到了,但是为了一个圆角,占用那么多空间,感觉不划算。

代码下载

评论列表

  1. 最好的还是图片,IE 这种东西圆角了影响多少性能还不好说

  2. 做的还可以,继续努力。

  3. 博主的域名很强大

  4. 4.47K 对 CSS 来说不算小了
    无视 IE

  5. 都学到CSS3了,我落后了。

  6. 在Chrome下测试有效,恭喜!

  7. IE9 RC版已经推出,用起来还是不错。

  8. 这都关注到了,不简单啊。情人节快乐!

  9. 好久没来了·拜个晚年·

  10. 纯css也能实现圆角啊,不过就是写的时候麻烦点。我评论的样式就是用的css圆角,为了圆角加载一个js,不太值吧。

  11. 路过..纯支持。哈哈

  12. 我觉得用图片做圆角在各个浏览器都可以兼容,这个做起来的效果比较完美

    • 但是也有缺点呀,如果页面大量不同的圆角,图片的体积也是个问题呀,而且不利于改版、维护

  13. 🙂 学习了
    又一代码控

  14. 我一般是套别人的代码。 😯

  15. 我用js,呵呵

  16. 妈的谁给我圆角的设计稿我就想痛扁他

  17. 用这种方法,有的时候还不一定表现出圆角,仅在IE吓

  18. 只能同时4角圆角?不是啊,可以单独设置耶~

  19. 其实本质上这个 htc 也是 js,只不过封装成了 htc 而已。

  20. 额…这个是不是只能弄圆角边框,我想圆角图片为啥没效果呢..

    • 圆角图片用空标签,然后背景图片,还是很多网站采用的。

      • 额…崩溃鸟!CSS加上behavior:url(border-radius.htc),图片看不到,被背景覆盖,去掉背景可以看到,但是background-position貌似没用了,我还想把avatar头像也搞圆,这中方法能实现不

  21. border-radius.htc只能是4个圆角,IE8问题很大,设置好的背景图片或颜色都看不到了。

  22. aa

    感觉这个并不好用。另外悄悄的告诉一下楼主,htc文件是可以放在任何目录的,但是要用绝对不址,不能用相对的。

韩国进行回复 取消回复

分类目录