iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 23
6
Modern Web

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

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

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

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

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

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

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

Border 與 outline 的結構

了解了 borderoutline 的語法規則後,接著來細部的了解一下,實際上這兩個屬性都屬於 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 可以支援圓角的設定,所以我們普遍在切版的時候較常使用到 borderoutline 一般是在表單輸入框被 focus 時,在外面那一圈變色的框線,除非設計有特別做這部份的設計,不然通常你會在 chrome 瀏覽器看到表單 focus 時出現一圈有色的光暈或加粗的邊框,或其他不同的視覺外觀,好呈現該物件取得焦點了。

borderoutline 是兩個不同特性的存在,所以縱使你為一個物件設定了 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
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
Background - 金魚都能懂的CSS必學屬性
下一篇
list-style - 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31

尚未有邦友留言

立即登入留言