html設(shè)置邊框?yàn)樘摼€的方法是,給邊框添加border-style屬性,并且設(shè)置屬性值為dashed就可以了,例如【p.dashed {border-style:dashed;}】。
本文操作環(huán)境:windows10系統(tǒng)、html 5、thinkpad t480電腦。
我們可以利用border-style屬性來設(shè)置邊框的樣式,使用此屬性你會發(fā)現(xiàn)設(shè)置邊框?yàn)樘摼€是非常簡單的。
可能有不少同學(xué)不太熟悉border-style屬性,下面我們來一起看看該屬性吧。
border-style屬性設(shè)置一個(gè)元素的四個(gè)邊框的樣式。
常用的屬性值有:
-
none 定義無邊框
-
hidden 與 "none" 相同。不過應(yīng)用于表時(shí)除外,對于表,hidden 用于解決邊框沖突
-
dotted 定義點(diǎn)狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線
-
dashed 定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線
-
solid 定義實(shí)線
代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> p.none {border-style:none;} 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.hidden {border-style:hidden;} </style> </head> <body> <p class="none">無邊框。</p> <p class="dotted">虛線邊框。</p> <p class="dashed">虛線邊框。</p> <p class="solid">實(shí)線邊框。</p> <p class="double">雙邊框。</p> <p class="groove"> 凹槽邊框。</p> <p class="ridge">壟狀邊框。</p> <p class="inset">嵌入邊框。</p> <p class="outset">外凸邊框。</p> <p class="hidden">隱藏邊框。</p> </body> </html>
運(yùn)行結(jié)果如下所示: