框線

CSS Podcast - 016: Borders

在方塊模型模組中，我們考慮使用影格類比來描述方塊模型的各個區段。

邊框方塊就是方塊的框架，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;
}

這會新增 1em 的 border-top-left-top 值，並將 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

任何有效圖片 (包含 CSS 漸層) 的 border-image-source (邊框圖片來源) 都可以為 url。

.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 的值與重複的值相同，但這次不會為了盡可能地貼切裁剪圖片邊緣區域，而是會延伸圖片並重複播放，進而達到流暢的重複播放體驗。
• space 值再度與重複相同，但這個值會在每個邊緣區域之間加上空格，以建立流暢的模式。

隨堂測驗

測驗您對邊界的瞭解程度

.my-element {
  border: solid hotpink;
}