Responsive Web Design 響應式網頁設計學習手冊

88

|

響應式網頁設計學習手冊

圖 4-10 邊框樣式的選項

要在一個宣告裡指定邊框，你可以依任何順序包含那些值。下列程

式碼將

<div>

的邊框設為 1 個像素，具有實線（solid）樣式，並且

是紅色（red）的︰

div { border: 1px solid red; }

如果你一次只要設定一個，也可以分別針對三個特性中的每一個作

設定︰

div { border-width: 2px; }

div { border-style: dotted; }

div { border-color: green; }

你也能夠分別設定元素的每一邊︰

div { border-left-width: 2em; }

div { border-right-style: inset; }

div { border-top-color: blue; }

三個特性中的每一個都能夠針對頂端、底部、左側及右側作

設定。

箱型尺寸

既然已經學到如何量測箱型的所有零件，你必須瞭解，不幸地，判

斷網頁上的箱型尺寸還是有點困難。內邊距、外邊距和邊框算是元

素寬度和高度的一部分嗎？視情況而定。

實際上，有兩種獨立的方法告訴瀏覽器如何量測一切。CSS3 新增的

box-sizing

特性允許你在二種方法之間作選擇，分別是

border-box

與

content-box

。

採用

border-box

時，一旦設定區塊元素的寬度，任何你所增加的內

邊距與方框都會在該寬度內。相反地，採用預設的

content-box

時，

任何內邊距與方框都會在該寬度外。 ...