bootstrap 3.0 LESSソースコードの浅い分析(二)

http://www.cnblogs.com/justany/p/3434744.html
 
border-radiusは最も一般的なCSS 3属性ですが、彼の何を知っていますか?
例:

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に関する関数は次の4つしかありません.

// 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属性が計算され、他の属性よりも多くの計算時間が生成される.
 
したがって、単一ページでこのプロパティを使用する要素を減らし、ページにトンカ現象が発生しないように注意します.
 
 
 
http://classfoo.cn/ 3.0のステーションは、基本的にbootstrapのすべての効果を使用しており、意見やアドバイスを歓迎しています.
ついでに牛にいいものをあげます.
http://classfoo.cn/app/webapptester