CSS分割線是網頁布局中常用的元素之一。當我們需要在不同的元素之間添加一些分隔效果時,就可以使用分割線了。下面分別介紹幾種CSS實現分割線的方法。
/* 方法一:使用border屬性實現分割線 */ .separator { border-bottom: 1px solid #ddd; } /* 方法二:使用hr標簽并設置樣式 */ hr.style1 { border: none; border-top: 1px solid #ccc; margin: 10px auto; } /* 方法三:使用偽元素before實現分割線 */ .separator::before { content: ""; display: block; height: 1px; background-color: #aaa; } /* 方法四:使用background-image實現分割線 */ .separator { background-image: linear-gradient(to right, #eee, #ccc, #eee); height: 1px; }
這些方法都可以輕松實現分割線的效果,根據不同的需求選取相應的方法即可。
上一篇css的內邊距屬性名
下一篇css的外聯