CSS Podcast - 016: 邊框
在盒模型模組中,我們使用了影格比喻來說明盒模型的各個部分。
邊框方塊是方塊的邊框,而 border
屬性則提供大量選項,可讓您以幾乎任何想得到的樣式建立邊框。
邊框屬性
個別的 border
屬性可用於設定邊框的各個部分樣式。
樣式
如要顯示邊框,您必須定義 border-style
。您可以選擇以下幾種做法:
使用 ridge
、inset
、outset
和 groove
樣式時,瀏覽器會將第二個顯示色彩的邊框顏色調暗,以提供對比和深度。不同瀏覽器的行為可能不同,尤其是 black
等深色。在 Chrome 中,這些邊框樣式會顯示為實心,而在 Firefox 中,則會變淺,並提供較深的第二種顏色。
瀏覽器的行為也會因其他邊框樣式而異,因此請務必在不同瀏覽器中測試網站。這類差異的常見例子是各瀏覽器如何轉譯 dotted
和 dashed
樣式。
如要設定框線的每個邊框線樣式,您可以使用 border-top-style
、border-right-style
、border-left-style
和 border-bottom-style
。
速記法
如同 margin
和 padding
,您可以使用 border
速記屬性,在單一宣告中定義邊框的所有部分。
.my-element {
border: 1px solid red;
}
border
速記法中的值順序為 border-width
、border-style
和 border-color
。
顏色
您可以使用 border-color
設定方塊的所有側面或個別側面的顏色。根據預設,它會使用方塊目前的文字顏色:currentColor
。也就是說,如果您只宣告邊框屬性 (例如寬度),除非您明確設定,否則顏色會是計算值。
.my-element {
color: blue;
border: solid; /* Will be a blue border */
}
.my-element {
color: blue;
border: solid yellow;
}
如要設定框框的每個邊框線顏色,請使用 border-top-color
、border-right-color
、border-left-color
和 border-bottom-color
。
寬度
框線的寬度是指線條的粗細,由 border-width
控制。預設邊框寬度為 medium
。不過,除非您定義樣式,否則不會顯示這項資訊。您可以使用其他已命名寬度,例如 thin
和 thick
。
border-width
屬性也接受長度單位,例如 px
、em
、rem
或 %
。如要設定框線的每個邊框線寬度,請使用 border-top-width
、border-right-width
、border-left-width
和 border-bottom-width
。
邏輯屬性
在「邏輯屬性」單元中,您瞭解如何參照區塊流程和內嵌流程,而非明確的頂端、右側、底部或左側。
您也可以使用邊框執行這項操作:
.my-element {
border: 2px dotted;
border-inline-end: 2px solid red;
}
在本例中,.my-element
的所有邊都已定義為具有 2px
,點狀邊框則為目前的文字顏色。接著,inline-end
邊框會定義為 2px
,並設為實心紅色。也就是說,在從左至右書寫的語言 (例如英文) 中,紅色邊框會位於方塊的右側。在阿拉伯文等由右至左的語言中,紅色邊框會位於方塊的左側。
瀏覽器對邊框中邏輯屬性的支援程度各有不同,因此請務必先確認支援情況再使用。
邊框半徑
如要為方塊加上圓角,請使用 border-radius
屬性。
.my-element {
border-radius: 1em;
}
這個速記符號會在方塊的每個角落加入一致的邊框。如同其他邊框屬性,您可以使用 border-top-left-radius
、border-top-right-radius
、border-bottom-right-radius
和 border-bottom-left-radius
定義每個邊的邊框半徑。
您也可以在縮寫中指定每個角落的半徑,順序為左上、右上、右下和左下。
.my-element {
border-radius: 1em 2em 3em 4em;
}
定義角落的單一值時,您會使用另一個速記字元,因為邊框半徑會分為兩個部分:垂直和水平邊。也就是說,設定 border-top-left-radius: 1em
時,您會設定左上角上半徑和左上角左半徑。
您可以為每個角落定義這兩個屬性,如下所示:
.my-element {
border-top-left-radius: 1em 2em;
}
這會新增 border-top-left-top
值 1em
,以及 border-top-left-left
值 2em
。這會將左上邊框半徑轉換為橢圓半徑,而非預設的圓形半徑。
您可以在 border-radius
速記法中定義這些值,並在標準值後使用 /
定義橢圓形值。這可讓您發揮創意,製作一些複雜的形狀。
.my-element {
border: 2px solid;
border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}
邊框圖片
您不必在 CSS 中使用以筆劃為基礎的邊框。您也可以使用 border-image
使用任何類型的圖片。這個簡寫資源屬性可讓您設定來源圖片、圖片切片方式、圖片寬度、邊框與邊緣的距離,以及重複方式。
.my-element {
border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
border-image-slice: 61 58 51 48;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
}
border-image-width
屬性與 border-width
類似:用於設定邊框圖片的寬度。您可以使用 border-image-outset
屬性,設定邊框圖片與其所包圍的方塊之間的距離。
border-image-source
border-image-source
(邊框圖片來源) 可為任何有效圖片的 url
,包括 CSS 漸層。
.my-element {
border-image-source: url('path/to/image.png');
}
.my-element {
border-image-source: linear-gradient(to bottom, #000, #fff);
}
border-image-slice
border-image-slice
屬性是一項實用的屬性,可讓您將圖片切成 9 個部分,由 4 條分割線組成。其運作方式與 margin
速記法相同,您可以藉此定義上、右、下和左的偏移值。
.my-element {
border-image: url('image.jpg');
border-image-slice: 61 58 51 48;
}
定義偏移值後,您現在有 9 個圖片區段:4 個角落、4 個邊緣和中間區段。邊角會套用至含有邊框圖片的元素角落。邊緣會套用至該元素的邊緣。border-image-repeat
屬性定義這些邊緣如何填滿空間,而 border-image-width
屬性則控制切片的大小。
最後,fill
關鍵字會決定切割後留下的中間部分是否用於元素的背景圖片。
border-image-repeat
border-image-repeat
是您指示 CSS 如何重複邊框圖片的方式。運作方式與 background-repeat
相同。
- 初始值為
stretch
,會將來源圖片拉伸,盡可能填滿可用的空間。 repeat
值會盡可能將來源圖片的邊緣平鋪,並可能裁剪邊緣區域以達成此目的。round
值與 repeat 相同,但它不會裁剪圖片邊緣區域,以便盡可能容納最多圖片,而是會延展圖片並重複圖片,以便達到無縫重複的效果space
值與 repeat 相同,但這個值會在每個邊緣區域之間加入空格,以建立無縫圖案。
進行隨堂測驗
測驗你對邊框的瞭解
預設的邊框顏色為何?
white
historicColor
black
currentColor
.my-element { border: solid hotpink; }
邊框的預設寬度為何?
solid
medium
1px
border-inline: 1px solid
會...