淘先锋技术网

首页 1 2 3 4 5 6 7

CSS 分割线图片旨在为网页添加美观的分隔线,在页面中起到分割不同内容模块的作用。

div {
border: none;
position: relative;
margin-top: 50px;
padding-bottom: 15px;
}
div:before {
display: block;
content: "";
border-top: 1px solid #ccc;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
div:after {
display: block;
content: "";
border-top: 1px solid #fff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

上述代码是创建一个分割线的样式,其中使用了伪元素before和after来实现。before元素使用灰色实线来绘制出分割线,after元素使用白色实线来产生较浅的效果。同时使用了transform属性对before和after元素进行水平缩放,实现分割线效果。

在实际使用中,我们可以按需调整分割线的颜色、宽度和高度等属性,以适应不同网页风格和内容要求。