border屬性指定了盒的border區的width，color和style。這些屬性適用於所有元素

border-width與百分比

border-width不支持百分比:不符合語義,邊框不會因設備大小而變化

border-width默認是medium:3px,因為border-style:double至少3px才有效果

瞭解各種border-style類型

border-style:dashed虛線,在chrome/firefox中,實點寬高3:1,實點虛點寬度比例1:1;在IE中,實點寬高2:1,實點虛點寬度比例2:1.

border-style:dotted點線,在chrome/firefox中,點線是小方塊;在IE中,點線是小圓點.

border-style:double雙線,計算規則是,雙線寬度永遠相等,中間間隔±1.

1px:0+1+0
2px:1+0+1
3px:1+1+1
4px:1+2+1
5px:2+1+2
6px:2+2+2
7px:2+3+2

使用雙線實現三道槓效果

border-color與color

沒有指定border-color的時候,color會作為默認的border-color

可以利用這個特性,來實現上傳按鈕變色功能,比以往的代碼要減少很多

border與background-position定位

使用background-position定位

background-position定位只能相對於左上角,不能相對於右下角,為了實現右下角的定位,我們可以配合border使用,因為100%右側定位不計算border區域

這裏需要注意的是,div設置了寬高,background-image才起作用

border與三角等圖形構建

利用border實現三角,梯形以及模擬圓角

當width和height都為0時,border如果果有一定寬度,可以實現由4個等邊三角形組成的正方形,width和height變大後,會逐漸演變成4個梯形

利用這種特性,可以通過兩個border和一個矩形模擬圓角矩形

此外還可以利用在下拉菜單,聊天框等有三角形狀的地方

border與透明框

border-color:transparent始於IE7,兼容性很好,因此我們可以通過透明框做很多事情

比方説前面的圖片右側固定定位以及各種圖形的實現

透明邊框的使用案例

第一個例子是在checkbox中使用透明框擴大渲染區域

第二個例子是filter:drop-shadow(20px 0 #ff0000)配合透明框實現渲染區域擴大,圖標變色

border在佈局中的應用

使用border實現兩欄等高佈局

使用border的好處是因為margin和padding使用很大的負值實現,所以如果負值元素有錨點定位則會飛出去,而使用border則沒有這種問題,缺點是不支持百分比寬度