用CSS來判別跑版

前言

有時候我們在做 CSS 切版的時候常常會發生跑版的狀況，但是一般瀏覽器並沒有辦法提供給我們格線系統，所以這邊紀錄一下使用 CSS 來開啟格線。

outline 這個屬性是 CSS3 的一個特別的屬性，使用方式與 border 屬性類似，但是需注意 border會占用空間(意旨boxmodel)，而 outline 並不會占用空間，所以很適合拿來觀看切版狀況，使用方式只需要在 CSS 輸入以下即可。

1
2
3

* {
  outline: 1px solid red;
}

開啟後就會像這樣子。

( * 代表 HTML 全部標籤)

而 outline 更完整的設置是這樣

* {
  outline-width: 1px;
  outline-style: solid;
  outline-color: red;
}

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕