認識border屬性
我們可以通過boder屬性來為元素設置邊框；元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。值得注意的一點是：為元素設置邊框時必須指定三個樣式(邊框的樣式，寬度，顏色)，三者缺一不可。
每個邊框有 3 個方面：寬度、樣式，以及顏色。下面內容將會具體講解這三個方面
一、邊框的寬度border-width：
設置邊框寬度有兩種方法，第一種是值復制法按照 top-right-bottom-left 的順序設置元素的各邊邊框，第二種 也可以通過單獨屬性分別設置邊框各邊的寬度，
（一）值復制（簡寫樣式）
指定四個值，分別設置給上，右，下，左。順時針方向；
div{border-style:soild;border-width:10px 20px 30px 40px}
指定三個值，第一個值10px設置給上邊框，第二個值設置給左邊框和右邊框，第三個值設置給下邊框；
div{border-style:soild;border-width:10px 20px 30px}
指定兩個值，第一個值設置給上下邊框，第二個值設置給左右邊框；
div{border-style:soild;border-width:10px 20px}
指定一個值，四個邊框使用同一個值
div{border-style:soild;border-width:10px}
（二）單獨屬性設置邊框寬度
- border-top-width 頂部邊框寬度
- border-left-width 左面邊框寬度
- border-right-width 右面邊框寬度
- border-bottom-width 底面邊框寬度
二、邊框的顏色 border-color
border-color 屬性，它一次可以接受最多 4 個顏色值。可以使用任何類型的顏色值，例如可以是命名顏色，也可以是十六進制和 RGB 值：
（一）值復制 如果顏色值小於 4 個，值復制就會起作用，與邊框寬度border-width屬性順序一致。
例如： p {border-style: solid;border-color: blue green;} 就是上下邊框為藍色，左右為綠色
表達的效果
（二）單獨屬性設置邊框顏色
還有一些單邊邊框顏色屬性。它們的原理與單邊樣式和寬度屬性相同：
- border-top-color 頂部邊框顏色
- border-right-color 右面邊框顏色
- border-bottom-color 底面邊框顏色
- border-left-color 左面邊框顏色
（三）透明邊框
如果我們希望創建一個不可見的邊框，即透明邊框。邊框顏色值 transparent。這個值用於創建有寬度的不可見邊框。
利用 transparent，使用邊框就像是額外的內邊距一樣；此外還有一個好處，就是能在你需要的時候使其可見。這種透明邊框相當於內邊距，因為元素的背景會延伸到邊框區域（如果有可見背景的話）
注意：transparent值，在IE7之前的版本是無法使用的，在以前的版本中瀏覽器或根據 color值 來設置邊框的顏色
三、邊框的樣式border-style
樣式是邊框最重要的一個方面，樣式控制着邊框的顯示，同時要注意如果沒有樣式，將根本沒有邊框。
CSS 的 border-style 屬性定義了 10 個不同的非 inherit （非繼承）樣式，包括 none。我們最常使用的四種邊框樣式分別是：solid實線；dotted點狀實線；dashed虛線；double雙實線。同樣邊框樣式與邊框寬度屬性相似有兩種設置方式：
（一）簡寫樣式(其順序與邊框寬度順序相同， top-right-bottom-left 的順序)
可為一個邊框定義四種樣式,例如：
div{border-style：solid dotted dashed double}
表現效果
（二）單獨屬性設置邊框樣式
- border-top-style 頂部邊框樣式
- border-right-style 右邊邊框樣式
- border-bottom-style 底部邊框樣式
- border-left-style 左邊邊框樣式
注意：如果要使用第二種方法，必須把單邊屬性放在簡寫屬性之后。因為如果把單邊屬性放在 border-style 之前，簡寫屬性的值就會覆蓋單邊值 none。
div{border-style: solid solid solid none;}可以寫成： div{border-style: solid; border-left-style: none;}
表現效果
（三）border-style:none
none是默認值
如果邊框樣式為 none，即邊框根本不存在，那么無論邊框多大的值都不可能有寬度。
因為邊框寬度自動設置為0了，而不論原先定義的是什么。
p {border-style: none; border-width: 50px;}
四、默認值
border-style的默認值為：none（無） 所以表格樣式的屬性一定不能缺少，如果缺少則border-width和border-color屬性都不可使用。
border-width的默認值為：3px 希望邊框寬度出現就一定要設置邊框樣式。
border-color的默認值為：black 黑色。默認的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設它是一個表格，其中只包含圖像，那么該表的邊框顏色就是其父元素的文本顏色（因為 color 可以繼承）。這個父元素很可能是 body、div 或另一個 table。