首頁 > web前端 > css教學 > 主體

css怎麼去掉border的底部

青灯夜游
發布: 2020-12-21 15:38:48
原創
4533 人瀏覽過

在css中,可以使用border-bottom或border-bottom-style屬性,設定「border-bottom:none;」或「border-bottom-style:none;」樣式來移除border的底部邊框。

css怎麼去掉border的底部

本教學操作環境:Windows7系統、css3版本,此方法適用於所有品牌電腦。

推薦:《css影片教學

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

而border-bottom縮寫屬性設定一個宣告中所有底部邊框屬性。包括:

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

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

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

範例:去掉border的底部邊框

#HTML程式碼:


有底边界。

无底边界。

点底边界。

虚线底边界。

实线底边界。

双线底边界。

凹槽底边界。

垄状底边界。

嵌入底边界。

外凸底边界。

登入後複製

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;}
登入後複製

效果圖:

css怎麼去掉border的底部

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的底部

更多程式相關知識,請造訪:

程式設計影片! !

以上是css怎麼去掉border的底部的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!