在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的底部有了一定的了解,想了解更多相关知识,欢迎关注本站行业资讯频道,感谢各位的阅读!