css左右四道横线 |css改变滚动条的形状

左右四道横线可以用来装饰标题、分割线等元素，用起来非常灵活。

下面是实现左右四道横线的CSS样式：

/* 实现左右四道横线 */
.line{
position: relative;
}
.line:before,
.line:after {
content: "";
position: absolute;
width: 40%;
border-bottom: 1px solid #ccc;
top: 50%;
transform: translateY(-50%);
}
.line:before {
left: 0;
}
.line:after {
right: 0;
}

首先，大家为需要实现这个效果的元素添加一个相对定位的样式，使得后面伪元素的绝对定位参照点正确。

接着，大家为该元素的before和after伪元素分别添加样式。其中，大家使用了content属性添加了一个空的内容。使得伪元素可以被添加在该元素的before和after位置。宽度设为40%，可以使得左右两道横线宽度小于该元素的宽度。

边框样式大家选择了实线，颜色为浅灰色。top与 translateY：-50% 的设置是横线可以居中垂直对齐。

最后，大家使用了left和right属性将左右两条横线分别定位到该元素的左右两侧。

使用这个css样式，大家可以灵活地添加装饰样式到多种不同的元素中。它是你设计网页时不可缺少的强大工具