css如何去掉border的底部

小編給大家分享一下css如何去掉border的底部，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

在css中，可以使用border-bottom或border-bottom-style屬性，設(shè)置“border-bottom:none;”或“border-bottom-style:none;”樣式來(lái)去掉border的底部邊框。

border-bottom-style屬性可以設(shè)置元素底部邊框樣式，當(dāng)屬性值設(shè)置為“none”時(shí)，可以指定無(wú)邊框。

而border-bottom縮寫(xiě)屬性設(shè)置一個(gè)聲明中所有底部邊框?qū)傩?。包括?/p>

• border-bottom-width    指定底部邊框?qū)挾?/p>

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

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

示例：去掉border的底部邊框

HTML代碼：

<p>有底邊界。</p>
<p class="none">無(wú)底邊界。</p>
<p class="dotted">點(diǎn)底邊界。</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>

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;}

效果圖：

看完了這篇文章，相信你對(duì)css如何去掉border的底部有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！