Border & outline- 金魚都能懂的CSS必學屬性

第 12 屆 iThome 鐵人賽

DAY 23

Modern Web

金魚都能懂的CSS必學屬性系列第 23 篇

12th鐵人賽 css教學 css 金魚都能懂網頁教學

CSScoke

2020-10-08 23:37:42

8899 瀏覽

border 主要用途是設定物件的邊框線， outline 是設定物件的外框線，這兩個很類似，但卻有一些細節有所差異，若是不清楚的話就可能會誤用，兩者的原始碼中常見的設定值為三個值，其語法規則如下

border: 1px solid red;
outline: 1px solid red;

從上面原始碼可以看到 border 與 outline 的值可以說是一模一樣啊，這樣看起來似乎沒啥差別呢！如果我們真的要用最簡單的說明的話，用兩點來快速比較好了

border 可以有「占據空間」的特性，outline 則沒有佔據空間
border 的外觀可以做圓角，outline 則永遠為矩形(物件的矩形空間)

也因為 border 可以支援圓角的製作 ，所以在工作上面，使用 border 的機會也多過於 outline (這理由似乎很容易引戰就是了)

Border 與 outline 的結構

了解了 border 與 outline 的語法規則後，接著來細部的了解一下，實際上這兩個屬性都屬於 CSS 簡寫的方式，就像是我們之前介紹過的 background 一樣，這屬性是屬於多個屬性的簡寫，所以我們可以在裡面寫多個值，先讓我們來了解一下兩者原理一下

border: 線條尺寸 線條樣式 線條色彩;
outline:  線條尺寸 線條樣式 線條色彩;

再次的我們可以發現兩者的值可以說是完全一樣啊，其實兩者的值分別是以下屬性的組成

border

border-width
border-style
border-color

outline

outline-width
outline-style
outline-color

是的！又是一個沒差異的狀態(笑)！所以接下來 ~~我懶了~~ ，除非有必要指出差異，否則一律以 border 為主要的介紹對象，不然又在騙稿費的Fu了(但明明沒稿費啊)。

border 這個簡寫由於可同時撰寫「border-width 、border-style、border-color 」三種屬性值，而此三個屬性值可設定的值的類型，又有明顯的不同，border-width 使用數值單位、border-style 使用關鍵字、border-color 使用色彩的特定設定方式，所以這表示瀏覽器對於這樣的值是不會出現辨識錯誤的狀況，所以我們在撰寫時其實可以隨意的更換這些值的順序，而不須照 Amos 所寫的順序，瀏覽器也能正常的辨識與呈現，所以以下幾種設定方式都是可以的。

border: 1px solid red;

border: solid 1px red;

border: red 1px solid;

border: red solid 1px;

所以其實有時候我們看別人的 border 設定時，會發現每個人寫的順序不同，也就是這原因了。

怎麼選擇用哪個

由於 border 可以支援圓角的設定，所以我們普遍在切版的時候較常使用到 border，outline 一般是在表單輸入框被 focus 時，在外面那一圈變色的框線，除非設計有特別做這部份的設計，不然通常你會在 chrome 瀏覽器看到表單 focus 時出現一圈有色的光暈或加粗的邊框，或其他不同的視覺外觀，好呈現該物件取得焦點了。

border 與 outline 是兩個不同特性的存在，所以縱使你為一個物件設定了 border ，也還是能夠為該物件設定一個 outline，只是......沒啥必要這要做，會這樣做的狀況，還是表單輸入欄位的取得焦點狀態有可能這麼做，其它狀況就看個別的專案或設計需求了。

Border 相關燒腦屬性

由之前的說明我們已經可以知道 border 是下面三個屬性的簡寫，那麼我們又能怎麼運用呢？

border-width
border-style
border-color

這三個屬性我們也須要了解一下，每一個屬性又能拆解成四個方向的線條，像是下面這樣

上邊框線

border-top-width: 1px;
border-top-style: solid;
border-top-color: red;

右邊框線

border-right-width: 1px;
border-right-style: solid;
border-right-color: red;

下邊框線

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;

左邊框線

border-left-width: 1px;
border-left-style: solid;
border-left-color: red;

所以當你要對一個物件設定四邊都長一樣的線條的時候，你可能會這樣設定

border-top-width: 1px;
border-top-style: solid;
border-top-color: red;

border-right-width: 1px;
border-right-style: solid;
border-right-color: red;

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;

border-left-width: 1px;
border-left-style: solid;
border-left-color: red;

太棒了！你寫出了一個垃圾 code 了！(被打)

光看起來這樣的原始碼就很囉唆，因為上面這樣的寫法，我們又能簡化成單邊框線的縮寫，像是下面這樣

border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;

原始碼又變乾淨了對吧？！ border 就是這麼一個令人感到神奇的屬性，感覺怎麼寫都可以，非常的彈性。

單一屬性的四值設定法

因為 border 有四個邊可以設定，所以我們可以把值的寫法改成針對屬性來寫，而不使用針對單邊，這樣我們就可以寫成下面這樣

border-width: 1px 1px 1px 1px;
border-style: solid solid solid solid;
border-color: red red red red;

是的！我們又返樸歸真了，回到一開始講的三個 border 屬性，但這時候須要注意的則是四個值的寫法了，針對屬性的寫法，我們可以在值中為每一個位置添加四個方向的設定，其原理就像下方這樣

border-width: 上邊框粗細   右邊框粗細   下邊框粗細   左邊框粗細;
border-style: 上邊框樣式   右邊框樣式   下邊框樣式   左邊框樣式;
border-color: 上邊框色彩   右邊框色彩   下邊框色彩   左邊框色彩;

簡單的來看，四個值的順序其實就是一個順時針的方向，所以非常好記憶，講到這邊我相信應該看的很累或很暈了，不多說，我們可以進入最後一個重點了，也就是四個方向的寫法，也能改成 1 到 4 個值的寫法，結構分別像是下面這樣

/*四個值，個別指定*/
border-width: 上  右  下   左;

/*三個值，左右採用同一個值*/
border-width: 上   [右左]    下;

/*二個值，上下採用同一值，左右採用同一值*/
border-width: [上下]   [右左];

/*一個值，上下左右都使用相同的值*/
border-width: [上右下左];

很好！我們總算把一些必要的常識都了解了，接下來就讓各位好好去試寫看看了，金魚疲累的CSS屬性...我們下篇見... z z z z Z Z Z Z

「金魚都能懂的CSS選取器」已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw

讓我們好好善用CSS選取器吧