bootstrap3.0LESS源代码浅析（二）_html/css_WEB-ITnose

border-radius是最常见的CSS3属性，但你知道他多少东西呢？

OK，我们回到Bootstrap，mixins.less中关于border radius的函数只有下面四个：

// Single side border-radius.border-top-radius(@radius) {  border-top-right-radius: @radius;   border-top-left-radius: @radius;}.border-right-radius(@radius) {  border-bottom-right-radius: @radius;     border-top-right-radius: @radius;}.border-bottom-radius(@radius) {  border-bottom-right-radius: @radius;   border-bottom-left-radius: @radius;}.border-left-radius(@radius) {  border-bottom-left-radius: @radius;     border-top-left-radius: @radius;} 

可见Bootstrap提供了单边的圆角的快捷方法。我们发现Bootstrap 3.0中border-radius相关属性并没有使用任何prefix。

实际上目前，现代浏览器上已经完全支持该属性，具体支持程度看见：

http://caniuse测试数据/border-radius

最昂贵的CSS属性

根据kangax的文章，对于border-radius，当页面滚动或者重绘时，其计算成本最高的CSS属性，比其他属性产生更多的计算时间。

所以注意减少单页面过多使用该属性的元素，避免页面产生顿卡现象。

查看更多关于bootstrap3.0LESS源代码浅析（二）_html/css_WEB-ITnose的详细内容...