8.「入門程式設計」「CSS教程」=>邊框

CSS 邊框屬性

CSS border 屬性允許您指定元素邊框的樣式、寬度和顏色。

CSS 邊框樣式

border-style 屬性指定要顯示的邊框型別。

允許以下值：

dotted

- 定義點線邊框

dashed

- 定義虛線邊框

solid

- 定義實線邊框

double

- 定義雙邊框

groove

- 定義 3D 坡口邊框。效果取決於 border-color 值

ridge

- 定義 3D 脊線邊框。效果取決於 border-color 值

inset

- 定義 3D inset 邊框。效果取決於 border-color 值

outset

- 定義 3D outset 邊框。效果取決於 border-color 值

none

- 定義無邊框

hidden

- 定義隱藏邊框

border-style

屬性可以設定一到四個值（用於上邊框、右邊框、下邊框和左邊框）。

例項

演示不同的邊框樣式：

p。dotted {border-style： dotted；}

p。dashed {border-style： dashed；}

p。solid {border-style： solid；}

p。double {border-style： double；}

p。groove {border-style： groove；}

p。ridge {border-style： ridge；}

p。inset {border-style： inset；}

p。outset {border-style： outset；}

p。none {border-style： none；}

p。hidden {border-style： hidden；}

p。mix {border-style： dotted dashed solid double；}

結果：

注意

：除非設定了 border-style 屬性，否則其他 CSS 邊框屬性都不會有任何作用！

CSS 邊框寬度

border-width 屬性指定四個邊框的寬度。

可以將寬度設定為特定大小（以 px、pt、cm、em 計），也可以使用以下三個預定義值之一：thin、medium 或 thick：

例項

演示不同的邊框寬度：

p。one {

border-style： solid；

border-width： 5px；

}

p。two {

border-style： solid；

border-width： medium；

}

p。three {

border-style： dotted；

border-width： 2px；

}

p。four {

border-style： dotted；

border-width： thick；

}

結果：

特定邊的寬度

border-width 屬性可以設定一到四個值（用於上邊框、右邊框、下邊框和左邊框）：

例項

p。one {

border-style： solid；

border-width： 5px 20px； /* 上邊框和下邊框為 5px，其他邊為 20px */

}

p。two {

border-style： solid；

border-width： 20px 5px； /* 上邊框和下邊框為 20px，其他邊為 5px */

}

p。three {

border-style： solid；

border-width： 25px 10px 4px 35px； /* 上邊框 25px，右邊框 10px，下邊框 4px，左邊框 35px */

}

CSS 邊框顏色

border-color 屬性用於設定四個邊框的顏色。

可以透過以下方式設定顏色：

name - 指定顏色名，比如 “red”

HEX - 指定十六進位制值，比如 “#ff0000”

RGB - 指定 RGB 值，比如 “rgb（255，0，0）”

HSL - 指定 HSL 值，比如 “hsl（0， 100%， 50%）”

transparent

註釋：如果未設定 border-color，則它將繼承元素的顏色。

例項

演示不同的邊框顏色：

p。one {

border-style： solid；

border-color： red；

}

p。two {

border-style： solid；

border-color： green；

}

p。three {

border-style： dotted；

border-color： blue；

}

結果：

特定邊框的顏色

border-color 屬性可以設定一到四個值（用於上邊框、右邊框、下邊框和左邊框）。

例項

p。one {

border-style： solid；

border-color： red green blue yellow； /* 上紅、右綠、下藍、左黃 */

}

HEX 值

邊框的顏色也可以使用十六進位制值（HEX）來指定：

例項

p。one {

border-style： solid；

border-color： #ff0000； /* 紅色 */

}

RGB 值

或者使用 RGB 值：

例項

p。one {

border-style： solid；

border-color： rgb（255， 0， 0）； /* 紅色 */

}

HSL 值

也可以使用 HSL 值：

例項

p。one {

border-style： solid；

border-color： hsl（0， 100%， 50%）； /* 紅色 */

}

CSS 邊框 - 單獨的邊

從上一章的例子中，您已經看到可以為每一側指定不同的邊框。

在 CSS 中，還有一些屬性可用於指定每個邊框（頂部、右側、底部和左側）：

例項

p {

border-top-style： dotted；

border-right-style： solid；

border-bottom-style： dotted；

border-left-style： solid；

}

結果：

不同的邊框樣式

上例的結果與此相同：

例項

p {

border-style： dotted solid；

}

它的工作原理是這樣的：

如果 border-style 屬性設定四個值：

border-style： dotted solid double dashed；

上邊框是虛線

右邊框是實線

下邊框是雙線

左邊框是虛線

如果 border-style 屬性設定三個值：

border-style： dotted solid double；

上邊框是虛線

右和左邊框是實線

下邊框是雙線

如果 border-style 屬性設定兩個值：

border-style： dotted solid；

上和下邊框是虛線

右和左邊框是實線

如果 border-style 屬性設定一個值：

border-style： dotted；

四條邊均為虛線

例項

/* 四個值 */

p {

border-style： dotted solid double dashed；

}

/* 三個值 */

p {

border-style： dotted solid double；

}

/* 兩個值 */

p {

border-style： dotted solid；

}

/* 一個值 */

p {

border-style： dotted；

}

CSS Border - 簡寫屬性

為了縮減程式碼，也可以在一個屬性中指定所有單獨的邊框屬性。

border 屬性是以下各個邊框屬性的簡寫屬性：

border-width

border-style（必需）

border-color

例項：

p {

border： 5px solid red；

}

結果：

您還可以只為一個邊指定所有單個邊框屬性：

左邊框

p {

border-left： 6px solid red；

background-color： lightgrey；

}

結果：

下邊框

p {

border-bottom： 6px solid red；

background-color： lightgrey；

}

結果：