之前在写聊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的,那种我找到了,但是为了一个圆角,占用那么多空间,感觉不划算。
最好的还是图片,IE 这种东西圆角了影响多少性能还不好说
做的还可以,继续努力。
博主的域名很强大
4.47K 对 CSS 来说不算小了
无视 IE
都学到CSS3了,我落后了。
ie有点该死
在Chrome下测试有效,恭喜!
IE9 RC版已经推出,用起来还是不错。
这都关注到了,不简单啊。情人节快乐!
好久没来了·拜个晚年·
纯css也能实现圆角啊,不过就是写的时候麻烦点。我评论的样式就是用的css圆角,为了圆角加载一个js,不太值吧。
不过,要是写模版的时候用css来实现圆角,要是偶尔需要一两个圆角,用图片也不错。
这个建议值得思考。
路过..纯支持。哈哈
我觉得用图片做圆角在各个浏览器都可以兼容,这个做起来的效果比较完美
但是也有缺点呀,如果页面大量不同的圆角,图片的体积也是个问题呀,而且不利于改版、维护
🙂 学习了
又一代码控
我一般是套别人的代码。 😯
那具体是哪种方法?CSS?图片?JS?
我用js,呵呵
哪个网站?我去看看是不是通用代码,为以后做准备。
妈的谁给我圆角的设计稿我就想痛扁他
直接用CSS3嘛,多简单啊!
用这种方法,有的时候还不一定表现出圆角,仅在IE吓
只能同时4角圆角?不是啊,可以单独设置耶~
border-radius.htc你可以单独设置一个圆角?不可能吧,我之前试了的,搞不定
其实本质上这个 htc 也是 js,只不过封装成了 htc 而已。
额…这个是不是只能弄圆角边框,我想圆角图片为啥没效果呢..
圆角图片用空标签,然后背景图片,还是很多网站采用的。
额…崩溃鸟!CSS加上behavior:url(border-radius.htc),图片看不到,被背景覆盖,去掉背景可以看到,但是background-position貌似没用了,我还想把avatar头像也搞圆,这中方法能实现不
图片圆角不好搞啊,CSS3也就貌似FF支持而已。
border-radius.htc只能是4个圆角,IE8问题很大,设置好的背景图片或颜色都看不到了。
非常好的建议,IE系列还是用标签模拟或者背景图片吧,这东西真心不好用,问题多
感觉这个并不好用。另外悄悄的告诉一下楼主,htc文件是可以放在任何目录的,但是要用绝对不址,不能用相对的。