CSS可以用來展開分割線,下面就讓我們來看看吧:
.split-line{ width: 100%; border-bottom: 1px solid black; text-align: center; line-height: 0.1em; margin: 10px 0 20px; } .split-line span{ background-color: #fff; padding: 0 10px; }
上述代碼展示了如何使用CSS來創建一條展開的分割線,并且還使用了一個帶有背景色的span標簽來插入想要展示的文本內容,比如“分割線”。
具體解釋如下:
首先,.split-line類是用來給分割線添加樣式的。width: 100%表示分割線的長度為100%;border-bottom: 1px solid black呈現分割線的樣子,即1像素寬的實線,顏色為黑色;text-align: center是將文字對齊到中間;line-height: 0.1em將行高設置為0.1倍的字體大小,使得分割線看起來更加自然;margin: 10px 0 20px調整了分割線的上下邊距,上邊距為10像素,下邊距為20像素。
接下來是span標簽的代碼。.split-line span表示添加到分割線內部的span元素的樣式。background-color: #fff設置文本內容的背景顏色,這里為白色;padding: 0 10px增加內邊距,左右為10像素,使得文本內容不會太靠近分割線。
總的來說,通過這些CSS樣式,我們可以很容易地創建一條居中展開的分割線,并插入想要表達的文本內容,從而豐富頁面的視覺效果。
下一篇css居中沒有效果