第一節：border-width的特性

border-width 不支持百分比

• 原因：border 的語義決定，所謂border邊框，不會因為設備的大小的變化而按比例變化，所以百分比單位不符合語義。
• 另外 CSS3 中類似不支持百分比的屬性還有 outline,box-shadow,text-shadow,……

border-width 還支持關鍵字：

• thin: 1px
• medium(默認值): 3px
• thick: 5px

為什么border-width的默認值是medium(3px)呢？明明thin(1px)更加常用！

因為border-style: double至少要3px才有效果。

第二節: 各種border-style類型

• border-style: solid實線，很熟，pass

  image

• border-style: dashed 虛線，

  image

image

• border-style: dotted 點線，

  image

  image

  IE 中可以使用 dotted 實現圓角哦！

  image

  用overflow: hidden隱藏不必要的區域，只顯示一個圓。

  image

  也可以實現任意大小圓角，只需要多構建幾個圖形，

  image

• border-style: double雙線

  image

  計算規則：雙線寬度永遠相等，中間間隔 ±1

  image

  兼容性很好，可以用來繪制圖形，

  image

• border-style: inset 內凹，

  image

• border-style: outset 外凸

  image

• border-style: groove 溝槽

  image

• border-style: ridge 山脊

  image

以上四種毫無價值：風格過時+兼容性差

image

第三節：border-color與color

• border-color 就是 color，換句話說，border-color 默認顏色就是 color
  

  image

• 類似的屬性還有 box-shadow,text-shadow,……

• 使用案例：hover 圖形變色，傳統方法需要三處 CSS 變色，使用該技巧只需要一處 CSS 變色
  傳統方法實現：

  image
  
  利用borer實現：
  image
  一起變色，且transition 過渡顏色也只要設置一次
  image

第四節：border與background定位

• background定位的局限：只能相對于左上角數值定位，不能相對右下角
  怎么辦？ 可以借助 border大法，只要在右側設置一個需求寬度的透明border即可

第五節：border與三角等圖形構建

• 溫故而知新：
  image

• 實現三角形
  image

• 實現梯形
  image

• 三角是如何產生的
  image
  
  
  只要將其他三個設置為透明即可
  image

• 實際應用場景：各種三角、尖角

  
  
  image

• 更加高級應用：模擬圓角
  （好處：兼容性好，border-radius 低版本 IE 不支持 ）

  image
  
  實現原理
  image
  
  放大看詳情：上邊的梯形
  image

第六節： border與透明邊框

border的透明邊框很有用！因為：始于 IE7 ，足夠兼容！

• 實例場景

  image
  
  傳統設計
  image
  
  border透明邊框用來增大點擊區域，需要顯示的邊框用box-shadow陰影來代替
  image

• 高級實例場景：用drop-shadow可以給png圖標賦色

  image
  
  然后通過 position定位 和 overflow: hidden 使圖標變色。

但是！！

image

image

image

第七節：border在布局中的應用

• border與等高布局

image

image

• 好處：如果是padding,margin實現，因為使用了很大的負值，所以在錨點定位時候會出問題，而border不會出現此問題
• 壞處：不支持百分比寬度