框線

盒模型模組中,我們使用了影格比喻來說明盒模型的各個部分。

三個相框並排排列。中間影格頂端有方塊模型的部分

邊框方塊是方塊的邊框,而 border 屬性則提供大量選項,可讓您以幾乎任何想得到的樣式建立邊框。

邊框屬性

個別的 border 屬性可用於設定邊框的各個部分樣式。

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

樣式

如要顯示邊框,您必須定義 border-style。您可以選擇以下幾種做法:

使用 ridgeinsetoutsetgroove 樣式時,瀏覽器會將第二個顯示色彩的邊框顏色調暗,以提供對比和深度。不同瀏覽器的行為可能不同,尤其是 black 等深色。在 Chrome 中,這些邊框樣式會顯示為實心,而在 Firefox 中,則會變淺,並提供較深的第二種顏色。

瀏覽器的行為也會因其他邊框樣式而異,因此請務必在不同瀏覽器中測試網站。這類差異的常見例子是各瀏覽器如何轉譯 dotteddashed 樣式。

Chrome、Firefox 和 Safari 中的邊框示範,展示邊框顯示方式的細微差異
在 Chrome、Firefox 和 Safari 中顯示的邊框。

如要設定框線的每個邊框線樣式,您可以使用 border-top-styleborder-right-styleborder-left-styleborder-bottom-style

速記法

如同 marginpadding,您可以使用 border 速記屬性,在單一宣告中定義邊框的所有部分。

.my-element {
    border: 1px solid red;
}

border 速記法中的值順序為 border-widthborder-styleborder-color

顏色

您可以使用 border-color 設定方塊的所有側面或個別側面的顏色。根據預設,它會使用方塊目前的文字顏色:currentColor。也就是說,如果您只宣告邊框屬性 (例如寬度),除非您明確設定,否則顏色會是計算值。

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

如要設定框框的每個邊框線顏色,請使用 border-top-colorborder-right-colorborder-left-colorborder-bottom-color

寬度

框線的寬度是指線條的粗細,由 border-width 控制。預設邊框寬度為 medium。不過,除非您定義樣式,否則不會顯示這項資訊。您可以使用其他已命名寬度,例如 thinthick

border-width 屬性也接受長度單位,例如 pxemrem%。如要設定框線的每個邊框線寬度,請使用 border-top-widthborder-right-widthborder-left-widthborder-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-radiusborder-top-right-radiusborder-bottom-right-radiusborder-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-top1em,以及 border-top-left-left2em。這會將左上邊框半徑轉換為橢圓半徑,而非預設的圓形半徑。

您可以在 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 會...

在第一行放置邊框。
將邊框放在內側。
在頂端和底部加上邊框 (在拉丁版面配置中)。
在左側和右側放置邊框 (在拉丁版面配置中)。