[分享]css两头圆的竖线

在网页设计中，我们经常会用到一些装饰性的元素来提高页面的美感。其中，两头圆的竖线就是一个常见的元素。这种竖线通常用于分割不同的内容区域，让页面看起来更加清晰明了。 .verticalline { : ...

在网页设计中，我们经常会用到一些装饰性的元素来提高页面的美感。其中，两头圆的竖线就是一个常见的元素。这种竖线通常用于分割不同的内容区域，让页面看起来更加清晰明了。

 .vertical-line {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2px;
        height: 100%;
        border-radius: 20px;
        background-color: #000;
    }
    .vertical-line:before,
    .vertical-line:after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #000;
    }
    .vertical-line:before {
        top: -5px;
    }
    .vertical-line:after {
        bottom: -5px;
    } 

这段CSS代码可以创建一个宽度为2像素、高度为100%、两端带有圆角的黑色竖线，同时在竖线两端添加圆形装饰元素。其中，.vertical-line类用于设置竖线的基本样式，:before和:after伪元素用于添加装饰圆形。

如果您需要创建一个两头圆的竖线，您可以使用这段CSS代码作为参考，并按照您的实际需求进行修改。希望这篇文章对您有所帮助，感谢您的阅读。