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）。

 

忘記在哪里的一道題目 

請用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屬性，比其他屬性產生更多的計算時間。

 

所以注意減少單頁面過多使用該屬性的元素，避免頁面產生頓卡現象。