在css中,可以使用border-bottom或border-bottom-style屬性,設(shè)置“border-bottom:none;”或“border-bottom-style:none;”樣式來(lái)去掉border的底部邊框。
本教程操作環(huán)境:Windows7系統(tǒng)、css3版本,該方法適用于所有品牌電腦。
推薦:《css視頻教程》
border-bottom-style屬性可以設(shè)置元素底部邊框樣式,當(dāng)屬性值設(shè)置為“none”時(shí),可以指定無(wú)邊框。
而border-bottom縮寫屬性設(shè)置一個(gè)聲明中所有底部邊框?qū)傩?。包括?/p>
-
border-bottom-width 指定底部邊框?qū)挾?
-
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;}
效果圖: