CSS魔法堂：重拾Border之——不單單是圓角

前言

 當CSS3推出border-radius屬性時咱們是那麼欣喜若狂啊，一想到終於不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，而後又發現border-top-left/right-radius的水平半徑之和大於元素寬度時，實際值會按比例分配元素寬度時，不由會問"我真的懂border嗎？"。本系列將稍微深刻探討一下那個貌似沒什麼好玩的border！
《CSS魔法堂：重拾Border之——解構Border》
《CSS魔法堂：重拾Border之——圖片做邊框》
《CSS魔法堂：重拾Border之——不單單是圓角》
《CSS魔法堂：重拾Border之——更廣闊的遐想》

圓角進化論

 當設計稿上出現圓角按鈕/標籤頁時，咱們會如何應對呢？CSS3到來以前最廣爲人知的應該就是"滑動門"(sliding door)實現方式了。

滑動門實現法

<style type="text/css">
ul{padding:0;margin:0;}
li{padding:0;margin:0;list-style:none;}
a{margin:0;text-decoration:none;}

/*clearfix*/
.nav{
  *zoom: 1;
}
.nav::after{
  content: ".";
  display: block;
  clear: both;
  line-height: 0;
  visibility: hidden;
}
/*滑動門實現Tab*/
.nav .nav-item{
  float: left;
  margin-right: 5px;
}
.nav .nav-item a{
  display: inline-block;
  background: url("./background.jpg") no-repeat;
  color:#333;
  font-size: 12px;
  line-height: 2;
}
.nav .nav-item a span{
  display: inline-block;
  background: url("./background.jpg") no-repeat right top;
  padding: 0 10px 0 5px;
  margin-left: 5px;
}

.nav .nav-item a:hover{
  background: url("./background.jpg") no-repeat left -30px;
}
.nav .nav-item a:hover span{
  background: url("./background.jpg") no-repeat right -30px;
}
</style>
<ul class="nav">
  <li class="nav-item"><a href="javascript:void 0"><span>首頁</span></a></li>
  <li class="nav-item"><a href="javascript:void 0"><span>PDCA檢驗單查詢</span></a></li>
  <li class="nav-item"><a href="javascript:void 0"><span>成品通用標準審覈</span></a></li>
</ul>

border-radius實現法

border-top-left-radius: [<length>|<percentage>]{1,2}
border-top-right-radius: [<length>|<percentage>]{1,2}
border-bottom-left-radius: [<length>|<percentage>]{1,2}
border-bottom-right-radius: [<length>|<percentage>]{1,2}
設置左上/右上/左下/右下角水平和垂直橢圓半徑
<length>:以帶單位的絕對值做爲半徑;
<percentage>:以對應border box的尺寸(不是border-width)爲參考系，設置半徑;
注意：結果值爲0(默認值)時，爲直角邊框
border-radius: [<length>|<percentage>]{1,4} [/[<length>|<percentage>]{1,4}]?:一次過設置4個角的橢圓半徑

 從上圖咱們能夠看到4個角分別對應4個獨立的橢圓形，而圓角正是4分之1個橢圓。
擼代碼！

<style type="text/css">
/*clearfix*/
.nav3{
  *zoom: 1;
}
.nav3::after{
  content: ".";
  display: block;
  clear: both;
  line-height: 0;
  visibility: hidden;
}
/*border-radius實現Tab*/
.nav3 .nav-item3{
  float: left;
  margin-right: 5px;
}
.nav3 .nav-item3 a{
  font-size: 12px;
  line-height: 2;

  display: inline-block;
  background: #0ac;
  padding: 0 10px;
  border: 1px solid #eee;
  border-radius: 8px 8px 0 0;
}
.nav3 .nav-item3 a:hover{
  background: #eef;
}
</style>
<ul class="nav3">
  <li class="nav-item3"><a href="javascript:void 0">首頁</a></li>
  <li class="nav-item3"><a href="javascript:void 0">PDCA檢驗單查詢</a></li>
  <li class="nav-item3"><a href="javascript:void 0">成品通用標準審覈</a></li>
</ul>

圓角的何止是border box啊

 上圖的content box變成橢圓形了，並且content box中的文字好像飄到content box外面。但確實是content box變爲橢圓形仍是說僅僅是背景色是如此而已呢？讓咱們添加overflow:hidden看看效果吧

 看來border-radius確實影響到content box了。其實border-radius將會影響到box model中的全部box。當咱們經過border-radius設置border box的橢圓半徑後，CSS渲染引擎會根據公式自動計算出margin/padding/content box的橢圓半徑，而後爲它們渲染出圓角。
注意

1. margin/border/padding/content box中相同方向的角的橢圓的圓心重疊;
2. 當橢圓半徑爲0時，渲染爲直角。

margin box圓角了

公式：margin-radius = border-radius + margin-width
當border-radius > margin-width時，margin-width=1 + (margin-width/border-radius-1)^3以確保margin-radius趨向於直角。

padding box圓角了

公式：padding-radius = border-radius + border-width
當padding-radius爲0時，渲染爲直角

<style type="text/css">
.s1{
background: #FEE;
width: 0;
padding: 50px;
border: 10px solid red;
border-radius: 10px;

float:left;
margin-right: 20px;
}
.s2{
background: #FEE;
width: 0;
padding: 50px;
border: 10px solid red;
border-radius: 20px;

float:left;
}
</style>
<div class="s1"></div>
<div class="s2"></div>

content box/area圓角了

公式：content-radius = border-radius + border-width - padding-width
當content-radius爲0時，渲染爲直角

<style type="text/css">
.s1{
background: #FEE;
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 10px;

float:left;
margin-right: 20px;
}
.s2{
background: #FEE;
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 20px;

float:left;
}
</style>
<div class="s1"></div>
<div class="s2"></div>

注意
因爲margin區域沒法觸發點擊等事件，而圓角border box所佔面積一定小於直角border box，所以爲保持可點擊區域面積，圓角border box應設置更大的高寬值。

話說"大值特性"和"等比特性"

 @張鑫旭老師在《秋月什麼時候了，CSS3 border-radius知多少？》提到"大值特性"和"等比特性"兩個特性。

<style type="text/css">
.s1{
box-sizing: border-box;
background: #FEE;
width: 100px;
height: 200px;
border: 10px solid red;
border-top-left-radius: 100px 200px;

float: left;
margin-right: 20px;
}
.s2{
box-sizing: border-box;
background: #FEE;
width: 100px;
height: 200px;
border: 10px solid red;
border-top-left-radius: 200px;

float: left;
}
</style>
<div class="s1"></div>
<div class="s2"></div>

你看div.s2明明把左上角的水平和垂直半徑設置爲200px，但實際效果倒是二者結果值均爲100px，難道這就是"大值特性"？

<style type="text/css">
.s1{
box-sizing: border-box;
background: #FEE;
width: 200px;
height: 100px;
border: 10px solid red;
border-top-left-radius: 300px 100px;
border-top-right-radius: 900px 100px;
}
</style>
<div class="s1"></div>

僅僅看div.s1水平方向的橢圓半徑，left和right相加300+900=1200遠遠大於border box的寬度200px，也就是說兩個橢圓將發生重疊。對於這種狀況CSS渲染引擎究竟是如何處理的呢？

1. 首先明確的是left+right必須小於等於border-box的寬度，也就是說兩個橢圓不能發生重疊。
2. 而後根據"等比例特性"獲得left/(left+right)=300/(300+900)=1/4，right/(left+right)=900/(300+900)=3/4，獲得left結果值爲200/4=50，right結果值爲3*200/4=150。

 經過"等比例特性"咱們很好地解釋了上圖中水平方向的效果，但你們有沒有發現垂直方向的半徑有點奇怪呢？咱們明明設置半徑爲100px，並且border box的高度剛好也是100px，按理應該是足夠的，爲什麼垂直半徑的結果值不是100px呢？
 其實W3C Spec中已經說得很清楚了！

Let f = min(Li/Si), where i ∈ {top, right, bottom, left}, Si is the sum of the two corresponding radii of the corners on side i, and Ltop = Lbottom = the width of the box, and Lleft = Lright = the height of the box. If f < 1, then all corner radii are reduced by multiplying them by f.

其實"最大值特性"和"等比例特性"只是上述規則的表象而已，最根本的公式爲f=min(Li/Si)
以第二個示例來計算一下吧
計算f的值

1. top-left和top-right的水平半徑之和爲1200px，而border box寬度爲200px，那麼f1=200/1200=1/6;
2. top-left和bottom-left的垂直半徑之和爲400px，而border box高度爲400px，那麼f2=400/400=1;
3. bottom-left和bottom-right的水平半徑爲0，忽略;
4. top-right和bottom-right的垂直半徑之和爲400px，而border box高度爲400px，那麼f3=400/400=1;
5. f=min(f1,f2,f3)，結果爲f=f1

縮放各半徑

1. top-left和top-right的水平半徑分別乘以f，獲得結果值300/6=50，900/6=150;
2. top-left和top-right的垂直半徑分別乘以f，獲得結果值400/6=66.66。

被忽視的豬腳——相交線

 當設置border-left和border-top後，咱們很容易預測到左邊框和上邊框的樣式，但它倆相交部分的樣式呢？這裏就涉及到相交線的問題了！

經過直角邊框找相交線

 圓角邊框是基於直角邊框的，這一點也體如今相鄰邊框的相交線上。

<style type="text/css">
  .box{
    width: 100px;
    height: 200px;
    border: 50px solid;
    border-left-color: red;
    border-top-color: blue;
    border-right-color: green;
    border-bottom-color: yellow;
  }
</style>
<div class="box"></div>

 咱們能夠看到兩邊相交所造成的矩形的對角線，將做爲邊的相交點。經過相交點判斷邊框樣式應應用到哪一條邊上。
透視圖以下

延長相交線

 因爲圓角邊框不像直角邊框那樣有棱有角，所以更難以分辨邊框樣式所對應的邊框。但只要咱們沿直角邊框的相交線向圖形內延伸，一切則清晰明瞭了。

<style type="text/css">
  .rounded-box{
    width: 100px;
    height: 200px;
    border: 50px solid;
    border-left-color: red;
    border-top-color: blue;
    border-right-color: green;
    border-bottom-color: yellow;
    border-radius: 100px;
  }
</style>
<div class="rounded-box"></div>

透視圖以下

兼容性

 雖然各大瀏覽器均支持border-radius屬性，但其實現效果卻不盡相同，咱們拿極端狀況來做試驗，最能看出效果。結論是讓咱們大跌眼鏡的：IE效果最爲理想！！

<style type="text/css">
.s1{
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  border: 50px solid;
  border-color: red blue green yellow;

  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}
</style>
<div class="s1"></div>

chrome34中

FF中

IE9

總結

 尊重原創，轉載請註明來自：http://www.cnblogs.com/fsjohnhuang/p/5458573.htm^_肥仔John

感謝

CSS Backgrounds and Borders Module Level 3 4. Borders
秋月什麼時候了，CSS3 border-radius知多少？
CSS滑動門Sliding door詳解 《圖解CSS3核心技術與案例實戰》——第3章 CSS3邊框