[分享]css分割线中间图案

CSS分割线中间图案是指将一条分割线中间添加一个图案，使得分割线不再单调。通过CSS的伪元素:before和:after来实现。 / 定义分割线样式 / .divider { height: 1px;...

CSS分割线中间图案是指将一条分割线中间添加一个图案，使得分割线不再单调。通过CSS的伪元素:before和:after来实现。

 /* 定义分割线样式 */
    .divider {
        height: 1px;
        background-color: #333;
        position: relative;
    }

    /* 分割线中间图案 */
    .divider:before, .divider:after {
        content: "";
        position: absolute;
        top: -5px; /* 图案相对于分割线的位置 */
        width: 50px; /* 图案的宽度 */
        height: 10px; /* 图案的高度 */
        background-color: #333; /* 图案的颜色 */
    }
    
    /* 设置图案样式 */
    .divider:before {
        left: 0; /* 左图案 */
    }
    
    .divider:after {
        right: 0; /* 右图案 */
    } 

上述代码中，我们定义了一个高度为1像素的分割线，并将位置设置为相对定位。接着使用伪元素:before和:after来添加图案，使用content属性定义图案的内容为空字符串，确保元素可以显示。设置图案的宽度、高度、颜色，以及相对于分割线的位置。通过left和right来控制左右图案的位置。最终在html中使用如下代码：

 <div class="divider"></div> 

分割线中间图案是CSS样式美化常用的技巧，通过定义不同的图案样式可以更好地突出页面的内容。在实际应用中可以根据需要选择不同的图案样式和颜色。