邊框是啥？上一次說到盒子模型裡面有border，這個邊框指的就是border，
比如說帶有弧度的，圓形的，帶有陰影的等。
那麼首先回顧一下盒子模型，盒子模型從裡到外分別是content,padding,border,margin。
分別是border-top,border-right,border-bottom,border-left。每一條border都可以單獨的設定樣式。
例如

border-left:5px solid #ccc;
border-right:5px dotted red;
border-top:5px dashed blue;
border-bottom
 
:5px groove pink;

這裡都是直接把一系列的屬性給一起設定了。第一個值為邊框的寬度，第二個值為邊框線的樣式，第三個值為邊框的顏色。
那麼邊框線的樣式有哪些？
1）solid，這是一根細線
2）dotted，這是一個一個的點
3）dashed，這是一根一根的短線
4）double，這是兩條細線，邊框的寬度要大於等於3px才會顯示出兩條線，原因是一條線的最小寬度是1px，那麼兩條就要2px，加上線與線之間有條縫隙，這條縫隙最小也要1px，所以border的寬度最小寬度為3px。為什麼線和縫隙最小都要1px才會顯示，因為1px已經不能再小了。整個螢幕有解析度，最小單位就是px（畫素）。
5）groove，這是css3裡面的東西，但是用的並不多，類似的還有ridge,inset,outset。
到這裡，已經知道了邊框的線有哪些樣式。緊接著就是看看如何獨立的去設定線的樣式，線的寬度，線的顏色等。那麼有如下屬性：

border-left-color //設定左邊框的顏色。
border-left-width //設定左邊框的寬度
border-left-style //設定左邊框線的樣式
//有border-left就有border-right,border-top,border-bottom。如下：
border-right-color
border-right-width
border-right-style
border-top和border-bottom也都有。

這些屬性都是單獨設定某條線的某個樣式的。之前看到過有類似
border-left:1px solid red;這種程式碼，這裡就直接指定了border-left，而不是一個具體的屬性，所以這裡就是一個屬性值的集合。第一個值就是邊框寬度，第二個值就是邊框線的樣式，第三個值就是邊框線的顏色。
那麼到這裡，已經知道如何去設定邊框的一些樣式。這些知識點就可以做到隨意的指定某邊框的樣式了。
緊接著，再給邊框加上弧度。設定邊框弧度的這個屬性叫做border-radius。如下：

border-radius:10px;

這句程式碼可以達到下面這個效果

可以看到這裡邊框的角是一個弧度，一個弧度來自一個圓，那麼這個圓的半徑就是border-radius設定的，這裡就是10px。所以值越大，就越圓。看下面的程式碼：

<div style="width:100px;height:100px;border:1px solid red;border-radius:50px;"></div>

效果是這樣的

看程式碼可以知道，div的寬高都是100px，border-radius是50px。那麼對應的就是一個半徑為50px的圓，這個圓的直徑恰好與div的寬高一致，就變成了一個圓。
border-radius:50px，其實它應該是這樣的
border-radius:50px 50px 50px 50px。border-radius也是一個屬性值的集合。表示左上角弧度，右上角弧度，右下角弧度，左下角弧度。如果都是一樣的，就可以直接給定一個值，表示各個角都是一樣的弧度。
那麼到這裡，已經知道如何去設定邊框的寬度，顏色，邊框線的樣式以及邊框的弧度了。緊接著就是給元素加個陰影。類似下面這樣：

這種效果看起來很立體。實現的程式碼如下：

<div style="width:100px;height:100px;border:1px solid #000;box-shadow:5px 5px 10px #ccc;"></div>

這裡有一個box-shadow屬性，就是這個屬性讓div加上了陰影。可以看到它有四個值
第一個值為x軸的偏移量，就是從左邊框開始，往右偏移多少。當然也可以為負值，就變成向左偏移了。
第二個值為y軸偏移量，就是從上邊框開始，往下偏移多少。可以為負值，表示向上偏移。
因此這裡的陰影是在右下方。
第三個值為陰影的模糊程度，值越大越模糊。
第四個值為陰影的顏色。
這個屬性是CSS3裡面的，現在已經運用的非常廣泛了。所以不得不知道。

那麼到這裡，已經知道如何去設定邊框的寬度，顏色，邊框線的樣式，邊框的弧度以及給元素加上陰影了。這些知識點就可以做出現在一些比較流行的樣式了。比如說圓形的頭像，帶有弧度的按鈕等。緊接著就是練習了。