我們可以用CSS來畫一個,那么一些顏色、寬度、邊距啥的屬性都可以輕松的自定義,用起來也很方便
在平時的網頁布局中,我們經常會用到豎線來進行一些有趣的分割,如果只是單純的用符號來做,那么一些顏色、寬度、邊距啥的都不怎么方便,這個時候我們可以用CSS來畫一個,這些屬性都可以輕松的自定義。
實際效果如下:
舉杯邀明月,對影成三人。
這段話的末尾有一條紅色豎線好了,沒了
HTML:
<div class="nbox-main">
<div class="nbox-yue">舉杯邀明月,對影成三人。</div>
<br>
這段話的末尾有一條紅色豎線<span></span>好了,沒了
</div>
CSS:
<style type="text/css">
.nbox-main span {
border-right: 2px solid #b52424;/*粗細、樣式、顏色*/
margin: 0 10px;/*邊距*/
padding-top: 4px;/*長度*/
}
.nbox-yue::after {
content: "";
border-right: 3px solid #111;/*粗細、樣式、顏色*/
margin: 0 20px;/*邊距*/
padding-top: 20px;/*長度*/
}
</style>