科技知識動態：border-style屬性怎么用

2021-05-19 03:30:29

導讀跟大家講解下有關border-style屬性怎么用，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說border-style屬性怎么用，小編也收

跟大家講解下有關border-style屬性怎么用，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說border-style屬性怎么用，小編也收集到了有關border-style屬性怎么用的相關資料，希望大家看到了會喜歡。

border-style屬性用于同時為一個元素的四個邊框設置樣式，或者單獨地為各邊設置邊框樣式。

CSS border-style屬性

作用：用于設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。它可以有一到四個值，例：

p.one {border-style:dotted dashed solid double;}p.two {border-style:dotted solid double;}p.three {border-style:dotted solid;}p.four {border-style:dotted;}

效果圖：

說明：只有當border-style屬性的值不是 none 時邊框才可能出現。

可以設置的屬性值：

none：定義無邊框。

hidden：與 "none" 相同。不過應用于表時除外，對于表，hidden 用于解決邊框沖突。

dotted：定義點狀邊框。在大多數瀏覽器中呈現為實線。

dashed：定義虛線。在大多數瀏覽器中呈現為實線。

solid：定義實線。

double：定義雙線。雙線的寬度等于 border-width 的值。

groove：定義 3D 凹槽邊框。其效果取決于 border-color 的值。

ridge：定義 3D 壟狀邊框。其效果取決于 border-color 的值。

inset：定義 3D inset 邊框。其效果取決于 border-color 的值。

outset：定義 3D outset 邊框。其效果取決于 border-color 的值。

inherit：規定應該從父元素繼承邊框樣式。

CSS border-style屬性的使用示例

<!DOCTYPE html><html><head><style type="text/css">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}</style></head><body>dotted邊框dashed邊框solid邊框double邊框groove邊框ridge邊框inset邊框outset邊框</body></html>

效果圖：