框線

CSS Podcast - 016：邊框

在「box model」(方塊模型) 模組中 我們考慮用一個影格比喻 說明方塊模型的每個部分

邊框方塊就是方塊的邊框 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

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 值與重複值相同。 而不是為了盡可能容納更多圖片 這個模型會延展圖片，然後重複播放 以便流暢地重複播放
• space 值再次和重複相同。 但這個值會在各個邊緣區域之間新增空格，以建立流暢的模式。

隨堂測驗

測試您對邊界的瞭解

.my-element {
  border: solid hotpink;
}