CSS 邊框
CSS 邊框屬性允許您指定元素的邊框樣式、寬度和顏色。
我所有邊都有邊框。
我有一個紅色的底部邊框。
我有一個圓角邊框。
CSS 邊框樣式
border-style
屬性指定要顯示的邊框型別。
允許的值如下:
dotted
- 定義一個點狀邊框dashed
- 定義一個虛線邊框solid
- 定義一個實線邊框double
- 定義一個雙線邊框groove
- 定義一個 3D 凹槽邊框。效果取決於 border-color 值ridge
- 定義一個 3D 脊狀邊框。效果取決於 border-color 值inset
- 定義一個 3D 嵌入式邊框。效果取決於 border-color 值outset
- 定義一個 3D 外凸式邊框。效果取決於 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 邊框屬性(您將在接下來的章節中瞭解更多)都將無效!