css漂亮的水平线

水平线是网页设计中常用的一种装饰元素，它的出现可以让页面更加美观、清晰，并且可以起到分割、划分页面的作用。而使用CSS的border属性可以很方便地实现水平线的效果。

下面我们给出一个使用CSS实现漂亮水平线的例子：

.horizontal-line {
border-top: 2px solid #d9d9d9;
margin: 20px 0;
}

以上代码定义了一个类名为 horizontal-line 的样式规则，它的作用是创建一条粗细为2像素、颜色为#d9d9d9的实线作为水平线，同时通过 margin 属性设置它距离上下内容块所在的容器的间距为20像素。

对于这个水平线，我们还可以通过增加样式规则来修改它的颜色、样式、宽度等属性:

/* 定义颜色为红色的虚线水平线样式 */
.horizontal-line-red {
border-top: 1px dashed #ff4d4f;
margin: 20px 0;
}
/* 定义颜色为绿色的实线水平线样式，且宽度为50% */
.horizontal-line-green {
border-top: 3px solid #52c41a;
margin: 15px 0;
width: 50%;
}

这样我们就可以在需要使用水平线的地方直接添加 horizontal-line 等类名到HTML元素上，从而实现漂亮的水平线效果。

查看更多关于css漂亮的水平线的详细内容...