CSS魔法堂：重拾Border之——解構Border

前言

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

解構Border

 提及border咱們天然會想起border box，而border box由4條牢牢包裹着padding box的邊(line)組成，因此border的最小操做單元是line。
 line具備厚度(line thickness)、樣式(line pattern)和顏色(line color)3個特性，所以咱們必須也只能圍繞它們作文章了！

Line Thickness

border-width:(medium|thin|thick|<length>){1,4}
默認值medium，當font-size爲17px或如下時，medium爲1px、3px或5px，具體有UA決定。
大小關係：thin <= medium <= thick
另外有4個子屬性border-top/right/bottom/left-width:medium|thin|thick|<length>

Line Color

border-color:(<color>|transparent){1,4}|inherit
默認值與color屬性值一致

<div style="color:red;border:solid;">hello world</div>

另外有4個子屬性border-top/right/bottom/left-color:<color>|transparent|inherit

Line Patterns

border-style:(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset){1,4}
默認值none，表示忽略border-color和border-width的屬性值，打死不顯示border。
hidden，效果與none同樣，只是應用於border-collapsed的表格上時不會發生衝突而已。

注意：各瀏覽器的效果是有差別的哦！
另外有4個子屬性border-top/right/bottom/left-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

合體技——一次搞定Thickness、Pattern和Color

border: <border-width>? <border-style> <border-color>?
其中<border-width>和<border-color>是可選，而<border-style>爲必填項。
另外有4個子屬性border-top/right/bottom/left:<border-width>? <border-style> <border-color>?

自定義彩虹——border-top/right/bottom/left-colors

border-top/right/bottom/left-colors:(<color>|transparent){1,}|inherit
 多顏色border規則

1. 顏色從外至內排列;
2. 每種顏色佔1px。若border-width大於顏色種類，則最後一種顏色佔據剩餘的寬度；若border-width小於顏色中類，則捨棄多餘的顏色。
    兼容性：就FF3.0+支持而已
   

<style type="text/css">
   .box{
     width: 100px;
     height: 100px;
     border: 10px solid;
     -moz-border-top-colors: rgb(255,0,0) rgb(255,165,0) rgb(255,255,0) rgb(0,255,0) rgb(0,127,255) rgb(0,0,255) rgb(139,0,255);
     -moz-border-right-colors: rgb(255,0,0) rgb(255,165,0) rgb(255,255,0) rgb(0,255,0) rgb(0,127,255) rgb(0,0,255) rgb(139,0,255);
     -moz-border-bottom-colors: rgb(255,0,0) rgb(255,165,0) rgb(255,255,0) rgb(0,255,0) rgb(0,127,255) rgb(0,0,255) rgb(139,0,255);
     -moz-border-left-colors: rgb(255,0,0) rgb(255,165,0) rgb(255,255,0) rgb(0,255,0) rgb(0,127,255) rgb(0,0,255) rgb(139,0,255);
   }
  </style>
  <div class="box">
  </div>

總結

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

感謝

CSS Backgrounds and Borders Module Level 3 4. Borders