border-radius的兼容问题

  border-radius可以便捷的制作圆角效果，不需要通过增加圆角图片来达到效果，便于维护。

语法：border-radius:none | 1-4 length | % / 1-4 length|%

按顺序设置圆角四个方向的值，和设置border的顺序一样。

' / '前后的值都存在，那么' / '前面设置的值为水平半径，后面设置的值为垂直半径。若没有' / '，则水平和锤子半径相等。

 

border-radius的兼容性：
支持的浏览器有： IE9+ Firefox4+ Chrome Sarari 5+  Opera

对于老板的浏览器，需要加不同的前缀，如-moz-  -webkit-

在浏览器中写法为：
-moz-border-radius:

-webkit-border-radius:

对于IE，IE9及以下不支持border-radius

低版本的IE要制作圆角效果，可以在背景上进行设置。

目前有一个办法使低版本IE兼容border-radius效果：

.box{

border-radius:15px;

behavior:url(ie-css3.htc);

}

需要下载一个htc文件，也是通过JS写的一个文件。在使用时，需要把这个文件放到服务器目录中。

注：当border-radius的值小于或者等于border的值的时候，边框内部角不再是圆角效果。

转载于:https://www.cnblogs.com/lionisnotkitty/p/6061080.html

总结

以上是生活随笔为你收集整理的border-radius的兼容问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。