一、border
關於border的3個屬性，分別為border-width、border-style、border-color。
其中，border-color默認為元素內容的前景色；border-width默認為關鍵字medium，但是border-style默認值為none；所以，不指定border-style，邊框將不存在。
關於border-color
transparent，據說特定情況下有奇效，需要知道有這樣一個可選值。
white，白色的dotted邊框，有時候會有奇效。
比如：
更確切地說，應該是顏色與父元素的背景顏色一樣的dotted/dashed邊框。
8種border-style：
（只有記住了，才能在需要的時候合理使用。）
關於mixed border
利用CSS的層疊，我們甚至可以為四個方向上的邊框分別設置不同的寬度、樣式和顏色，取決於具體情況。
小tips：邊框模擬，等高布局
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>邊框模擬等高布局</title> 6 <style> 7 div.container { 8 margin-left: 200px; 9 overflow: hidden; 10 } 11 12 div.box { 13 width:300px; 14 float: left; 15 16 } 17 18 div.box1 { 19 background-color: brown; 20 border-right: 300px solid green; 21 margin-right: -300px; 22 } 23 24 p { 25 margin-bottom: 50px; 26 } 27 28 </style> 29 </head> 30 <body> 31 <div class="container"> 32 <div class="box box1"> 33 <p>box1</p> 34 <p>box1</p> 35 <p>box1</p> 36 <p>box1</p> 37 <p>box1</p> 38 <p>box1</p> 39 <p>box1</p> 40 </div> 41 <div class="box box2"> 42 <p>box2</p> 43 <p>box2</p> 44 <p>box2</p> 45 </div> 46 <div class="container"> 47 </body> 48 </html>
其實現原理為：左列邊框寬度與margin負值相結合，讓右邊框成為右列的背景。
二、border-radius
語法規則：
border-radius:a b c d; 順序依次為上左、上右、下右、下左。（順時針方向）
border-radius:a b c d/a b c d ;第一組為水平數值，第二組為垂直數值。
border-top-left-radius:a b; 單個圓角的設立。
（定義單個圓角時，一定要先上下、后左右，否則無效。）
注意：
圓角生效並不以邊框的存在為前提，也就是說，即使沒有邊框，也能設立圓角。
小tips：border-radius:50%
三、border-image
與border-radius不同，border-image以border的存在為前提；其本質是將border-style替換成image。
語法規則：
border-image-source
支持none和url兩種選擇；（如果是none的話，下面就不用看了。。。）
border-image-slice
按top、right、bottom、left的順序指定九宮格的切法；支持純數字和百分數。
（純數字自帶px單位；百分數以圖像的寬高為基准計算。）
fill，可選；默認情況下第九區是不顯示的；指定了fill才會顯示出來；在border-image-slice中指定。
border-image-width
按top、right、bottom、left的順序指定border-image-width，覆蓋border-width；可選。
經測試，border-image-width大於border-width時，會向內擴展（外面那條線不變，向里面擴展增加寬度），但是只是它的獨角戲，除了它自己發生了變化之后，其它任何東西都不會變化；它會侵入padding區甚至內容區。
border-image-width小於border-width時，會向外收縮（外面那條線不變，里面這條線向外收縮），與padding區或者內容區留出空隙。
可以為0，即border-image不存在；但不能為負值。
（個人建議，此屬性看看就好，就讓它默認等於邊框的寬度吧。）
border-image-outset
按top、right、bottom、left的順序指定圖像向外移動的距離；可選；支持像素距離和純數字。
像素距離好理解，20px就是移動20px的意思；純數字是指border-width的倍數。（注意，是border-width，不關border-image-width的事。）
請注意，這里用的是移動這個詞，並不是擴展。
border-image-repeat
按top、right、bottom、left的順序指定如何填充邊框的空白；接受兩個值，一個水平方向，一個垂直方向。
默認stretch（拉伸），可選repeat（重復）和round（平鋪）。
這里只是一些我對這些屬性使用方法上的總結，並沒有對屬性本身的含義與機制作出說明。
關於這5個屬性的具體說明，推薦一篇文章，css3:border-image邊框圖像詳解，寫得很好，非常仔細，我這么小白都看懂了。
outline
outline-width、outline-style、outline-color；語法和表現都和border一樣，但是不占任何文檔空間。
outline-offset，定義outline和border（padding、content area）的距離，與margin沒有關系。
四、box-shadow
語法規則：
h-shadow（必需，水平陰影的位置，可負）；
v-shadow（必需，垂直陰影的位置，可負）；
blur（可選，模糊距離）；
spread（可選，陰影的尺寸）；
color（可選，陰影的顏色）；
outset（默認）/inset（可選，將外部陰影改為內部陰影）。
box-shadow應用
CSS：
1 .container { 2 width:200px; 3 height:100px; 4 background-color: #ccc; 5 border:10px solid red; 6 border-radius: 10px; 7 box-shadow: 0 0 0 10px green; 8 }
效果：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 body { 8 margin:0; 9 } 10 11 .container { 12 width:200px; 13 margin: 0 auto; 14 box-shadow: 0 4px 8px rgba(0,0,0,0.3),0 8px 16px rgba(0,0,0,0.5) ; 15 } 16 17 p { 18 position: absolute; 19 margin: -40px 0 0 50px ; 20 } 21 22 </style> 23 <body> 24 <div class="container"> 25 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:200px;height:300px" /> 26 <p>I am "萌萌噠".</p> 27 </div> 28 </body> 29 </html>
