## 邊框(border)
border是個比較靈活的屬性,它有border-width、border-style、border-color三個子屬性。
1. border-width:數字+單位;
2. border-style: none || hidden || dashed || dotted || double || groove || inset || outset || ridge || solid ;
3. border-color: 顏色 ;
它可以按照width、style和color的順序簡寫:
`border: 5px solid #369;`
有的時候,border可以寫的更簡單些,有些值可以省掉,但是請注意哪些是必須的,你也可以測試一下:
1. border:groove red; //大家猜猜這個邊框的寬度是多少?
2. border:solid; //這會是什么樣子?
3. border:5px; //這樣可以嗎?
4. border:5px red; //這樣可以嗎??
5. border:red; //這樣可以嗎???
通過上面的代碼可以了解到,border默認的寬度是3px,默認的色彩是black——黑色。默認的顏色是該規則中的color屬性的值,而color默認是黑色的。border的縮寫中border-style是必須的。
同時,還可以對每條邊采用縮寫:
`border-top: 4px solid #333;
border-right: 3px solid #666;
border-bottom: 3px solid #666;
border-left: 4px solid #333;`
還可以對每個屬性采用縮寫:
`border-width: 1px 2px 3px;
border-style: solid dashed dotted groove;
border-color: red blue white black;`