CSS 中 border:none 與 border:0 的本質區別與性能分析

核心結論

在標準瀏覽器中，兩者視覺效果一致（無邊框），但底層渲染機制不同：

• border:none 是 border-style: none 的簡寫，瀏覽器直接跳過邊框渲染。
• border:0 是 border-width: 0 的簡寫，瀏覽器仍會解析 border-style 和 border-color，只是寬度為 0。

因此 border:none 性能略優於 border:0，建議優先使用 border:none。

瀏覽器開發者工具驗證

Chrome 審查元素

/* border:none */
element.style {
  border: none;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-width: initial;
  border-color: initial;
}

/* border:0 */
element.style {
  border: 0;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-style: initial;
  border-color: initial;
}

Firefox Firebug

/* border:none */
element.style {
  border: medium none;
}

/* border:0 */
element.style {
  border: 0 none;
}

關鍵差異在於 medium（默認邊框寬度）與 0 的對比。

實際案例驗證繼承行為差異

<style>
  div {border: 1px solid black; margin: 1em;}
  .zerotest div {border: 0;}
  .nonetest div {border: none;}
  div.setwidth {border-width: 3px;}
  div.setstyle {border-style: dashed;}
</style>

<div class="zerotest">
  <div class="setwidth">"Border: 0" and "border-width: 3px"</div>
  <div class="setstyle">"Border: 0" and "border-style: dashed"</div>
</div>
<div class="nonetest">
  <div class="setwidth">"Border: none" and "border-width: 3px"</div>
  <div class="setstyle">"Border: none" and "border-style: dashed"</div>
</div>

測試結果分析

1. .zerotest .setwidth：雖設 border-width:3px，但 border-style:none → 無邊框（IE7 會顯示 3px 邊框，因其解析不同）
2. .zerotest .setstyle：雖設 border-style:dashed，但 border-width:0 → 無邊框
3. .nonetest .setwidth：同 (1)，無邊框（IE7 無邊框）
4. .nonetest .setstyle：border-style:dashed 生效，border-width 回退默認 medium，border-color 默認黑色 → 顯示 3px 黑色虛線框（IE7 為 1px）

IE7 特殊解析差異

• border:0 → 解析為 border-width:0
• border:none → 解析為 border-style:none

這導致在 IE7 中，繼承 border-width 時表現不同。

最佳實踐建議

「設計蜂巢建議使用 border:none 實現無邊框效果，兼顧性能與跨瀏覽器一致性。」