border-bottom(css如何去掉border的底部)

在css中,可以使用border-bottom或border-bottom-style屬性,設置“border-bottom:none;”或“border-bottom-style:none;”樣式來去掉border的底部邊框。

border-bottom-style屬性可以設置元素底部邊框樣式,當屬性值設置為“none”時,可以指定無邊框。

而border-bottom縮寫屬性設置一個聲明中所有底部邊框屬性。包括:

• border-bottom-width 指定底部邊框寬度

• border-bottom-style 指定底部邊框樣式

• border-bottom-color 指定底部邊框顏色

示例:去掉border的底部邊框

HTML代碼:

<p>有底邊界。</p><pclass="none">無底邊界。</p><pclass="dotted">點底邊界。</p><pclass="dashed">虛線底邊界。</p><pclass="solid">實線底邊界。</p><pclass="double">雙線底邊界。</p><pclass="groove">凹槽底邊界。</p><pclass="ridge">壟狀底邊界。</p><pclass="inset">嵌入底邊界。</p><pclass="outset">外凸底邊界。</p>

css代碼:

p{border-style:solid;}p.none{border-bottom-style:none;}p.dotted{border-bottom-style:dotted;}p.dashed{border-bottom-style:dashed;}p.solid{border-bottom-style:solid;}p.double{border-bottom-style:double;}p.groove{border-bottom-style:groove;}p.ridge{border-bottom-style:ridge;}p.inset{border-bottom-style:inset;}p.outset{border-bottom-style:outset;}

效果圖:

p{border-style:solid;border-bottom:thickdotted;}p{border-style:solid;}p.none{border-bottom:none;}p.dotted{border-bottom:thickdotted#ff0000;}p.dashed{border-bottom:dashed#ff0000;}p.solid{border-bottom:solid#ff0000;}p.double{border-bottom:double#ff0000;}p.groove{border-bottom:groove#ff0000;}p.ridge{border-bottom:ridge#ff0000;}p.inset{border-bottom:inset#ff0000;}p.outset{border-bottom:outset#ff0000;}

效果圖:

看完了這篇文章,相信你對css如何去掉border的底部有了一定的了解,想了解更多相關知識,歡迎關注本站行業資訊頻道,感謝各位的閱讀!