css如何去掉border的底部

小編給大家分享一下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>
<p class="none">無底邊界。</p>
<p class="dotted">點底邊界。</p>
<p class="dashed">虛線底邊界。</p>
<p class="solid">實線底邊界。</p>
<p class="double">雙線底邊界。</p>
<p class="groove">凹槽底邊界。</p>
<p class="ridge">壟狀底邊界。</p>
<p class="inset">嵌入底邊界。</p>
<p class="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:thick dotted;
}
p {border-style:solid;}
p.none {border-bottom:none;}
p.dotted {border-bottom:thick dotted #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的底部有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！