CSS 深刻理解之 border 【筆記】

本文是對慕課網張鑫旭的課程《CSS 深刻理解之 border》的學習筆記，並結合了一些我的理解。

border-width 不支持百分比

border-width 不支持百分比單位，緣由以下：

• 在實際設計中，邊框通常是固定大小的，不會隨着盒子寬度的增長而增長

  • margin 和 padding 爲百分比單位時，是相對於 containing block 的寬度而言的

• 邊框相對於盒子寬度來講是很小的，若是像 padding、margin 那樣支持百分比單位，那麼佔的百分比數值也將會很小

一樣不支持百分比的還有 outline, box-shadow, text-shadow ...

border-width 支持的關鍵字有 （數值對 IE8+ 有效, chrome 等不太同樣，由於標準對具體實現沒有規定）

• thin: 1px

• medium: 3px 默認值

  • 爲何默認值是 3px 呢？由於border-style: double 至少要 3px 纔有效果

• thick: 5px

border-style

• solid

• dashed

  • chrome/firefox 和 IE 的虛線比例不一致

• dotted

  • chrome/firefox 的點是方的，IE 的是圓的

  • 能夠用這個來實現 IE七、8下的圓角效果（連接請用 IE 打開）

• double

  • 雙線

  • 雙線寬度永遠相等，中間空白寬度 ±1

  • 可用於實現 menu 三道槓效果，上 border-style 是 double，下 border-style 是 solid。

    • 兼容性好，不須要用僞元素

• inset、outset、groove、ridge

  • 很差看，通常不用

  • 兼容性差

border-color 與 color

• 當沒有指定 border-color 的時候，會使用 color 做爲邊框色

  • 當須要邊框顏色和內容顏色一致時能夠簡化代碼

• 相似的還有 box-shadow, text-shadow ...

border 與 background 定位

• background 定位的侷限：只能相對於容器的左上角定位，不能相對於右側定位

  • CSS2 是這樣，CSS3 支持（IE9+）

  • 解決辦法：

    • 多層標籤嵌套

    • 使用 border

      border-right: 50px solid transparent;
      background: 100% 40px;

border 與圖形構建

• border-style

  • dotted：IE七、8圓角

  • double：三道槓圖標

  • solid：三角、梯形

    • 經過border-color: transparent

    • 下拉按鈕、對話框、三角疊加造成更復雜圖形

    • 用梯形拼合造成圓角效果，兼容性好

border 與透明邊框

• 支持 IE7+，兼容性好

• 使用

  • background 右側定位

  • 三角圖形

  • 增長單選/複選響應區域大小

    • 用盒陰影實現邊框，原先的 border 變成透明來增長點擊區域

  • 擴大渲染區域，drop-shadow

border 在佈局中的應用

• border 與等高佈局

  • 用 border 模擬一欄，將內容移至 border 內

  • 缺點：不支持百分比寬度