css border-bottom div css下邊框樣式設置

css border-bottom div下邊框對象底部邊框樣式設置
border-bottom是對對象下邊邊框設置樣式單詞，對層等對象設置下邊框顏色、寬度、樣式，所用CSS border-bottom下邊框底部邊框屬性實現。
一、css border-bottom邊框語法
border-bottom語法：
border-bottom:1px solid #000
設置下邊邊框寬度為1px、實線樣式、顏色為黑色。
div{border-bottom:1px solid #000}
設置div下邊框樣式，下邊框寬度為(厚度)1px，邊框樣式為實線(solid)、邊框顏色為黑色(#000)。
border-bottom單獨分拆與簡寫：
border-bottom:1px solid #000可以分拆為：
border-bottom-width:1px
border-bottom-style:solid
border-bottom-color:#000
可見分拆後CSS下邊框樣式代碼比較多，所以一般通常我們簡寫：
border-bottom:1px solid #000
這樣簡寫縮寫border-bottom樣式達到代碼最簡代碼量最少，也是推薦使用的代碼寫法。
二、常規border-bottom下邊框應用
1、對對象設置下邊框border-bottom CSS樣式。
.exp-a{ border-bottom:1px solid #F00}
對class=”exp-a”設置1px實線紅色下邊框樣式。

下邊框border-bottom樣式應用效果截圖
2、應用border-bottom對文字加下劃線效果
當然我們知道對文字加下劃線除了HTML標簽和CSS text-decoration實現，當然我們也可以使用border-bottom達到一樣下劃線效果。這裏只作為一種應用，實際布局時候根據需求選擇下劃線CSS或HTML標簽。
當然border-bottom實現文字下劃線就可以改變下劃線粗細等效果
關鍵CSS代碼如下：
.exp-a{ border-bottom:4px solid #F00}
完整HTML+CSS代碼
border-bottom應用 CSS5
.exp-a{ border-bottom:4px solid #F00}
CSS5測試文字，加下劃線border-bottom
使用span加class應用.exp-a，這樣不改變文段排版。
border-bottom下劃線效果截圖：

border-bottom實現下劃線實例效果截圖
三、border-bottom小結
下邊框屬性border-bottom與邊框border語法相同，布局應用相同，只是只對單邊框設置邊框效果。從以上兩個border-bottom應用實例，掌握其用法，靈活布局演變出更多布局需求。
作者：div css





創作打卡挑戰賽


贏取流量/現金/CSDN周邊激勵大獎