css样式横线有圆角

在网页设计中，常常需要使用划横线的效果来分隔不同内容或强调某些信息。而很多时候，直接使用border-bottom属性的横线可能显得过于简单，不够美观。这时候，我们可以通过CSS样式来实现具有圆角的横线效果。

.text-line {
    position: relative;
}
.text-line::after {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #ccc;
    border-radius: 2px;
}
    

这段CSS代码中，我们首先为包含文字的元素(.text-line)设置了相对位置(position)。然后，我们使用伪类(::after)来添加一个绝对位置的元素，并且设置它的高度(height)为1像素，颜色为灰色背景色(background-color)，同时为了实现圆角的效果(border-radius)，我们设置了2像素的半径值。

这样，我们就实现了一个具有优美圆角的横线效果。此外，在样式中，我们还可以通过调整宽度(width)和高度(height)来改变横线的粗细，通过更改颜色来改变横线的色彩。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！