bootstrap 3.0 LESS源代码浅析(二)


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

比如:

border-radius:2em;

相当于什么?

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

实际上,其首先都是水平方向(top or bottom)的弧度,然后才是垂直方向的弧度(left or right)。

 

忘记在哪里的一道题目 

bootstrap 3.0 LESS源代码浅析(二)

请用CSS实现如上图一样的椭圆,有兴趣的同学可以思考一下。 

 

回到Bootstrap 3.0

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.com/border-radius

 

最昂贵的CSS属性

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

 bootstrap 3.0 LESS源代码浅析(二)

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

 


发表评论

电子邮件地址不会被公开。

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>