用CSS來判別跑版

前言

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

outline

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

1
2
3
* {
outline: 1px solid red;
}

開啟後就會像這樣子。

圖片

( * 代表 HTML 全部標籤)

而 outline 更完整的設置是這樣

1
2
3
4
5
* {
outline-width: 1px;
outline-style: solid;
outline-color: red;
}

MDN更詳細介紹

Liker 按讚 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點牡蠣鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)機制,一個人一篇文章最多只能按五下拍手,如果你願意按個讚,對於創作者是一個莫大的鼓勵。

Google AD