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元素进行水平缩放,实现分割线效果。
在实际使用中,我们可以按需调整分割线的颜色、宽度和高度等属性,以适应不同网页风格和内容要求。