CSS 下邊框不顯示？常見拼寫錯誤與除錯技巧

設定 border-bottom 卻迟迟不見蹤影？90% 的案例是拼寫或選取器錯誤。本文以實戰案例快速定位問題。

典型錯誤代碼

<div class="m_4">內容</div>

/* CSS */
.m_4 {
  border-bottom: 1px solid #ccc; /* 正確 */
}

/* 錯誤版：class 前多一個點 */
. .m_4 {  /* ← 這裡！雙點導致選取器無效 */
  border-bottom: 1px solid #ccc;
}

快速排查清單

1. 選取器拼寫：檢查 class/id 前綴（.、#）是否重複、遺漏。
2. 盒模型衝突：父元素 overflow: hidden 或 display: flex 可能切掉邊框。
3. 疊層順序：後方元素 z-index 遮蓋、背景色覆蓋邊框。
4. Reset/Normalize CSS：全域樣式可能重置 border: 0，需提高優先級或使用 !important（不推薦）。

開發者工具一鍵定位

F12 開啟 Elements 面板 → 選取目標元素 → Computed -tab 搜尋 border-bottom → 若顯示「已刪除」或被劃掉，點擊右側檔案連結直達錯誤行。

CSS 不生效多半是「選取器寫錯」或「優先級被覆蓋」。養成「先看 Computed 再改代碼」的習慣，能省下 80% 的除錯時間。