css怎么在圆中间弄黑线 |几款清理无用的css样式的工具

.circle{
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid #000000;
position: relative;
}
.circle:after{
content: "";
width: 100%;
height: 2px;
background: #000000;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}

首先，大家创建一个类名为“circle”的元素，用于生成圆形。大家设置了宽度和高度为200像素，并使用“border-radius:50%”属性将其变成圆形。接下来，大家设置了10像素宽的黑色边框。

接下来，在“circle”元素的伪元素“after”上添加一个2像素高的黑色背景。这个元素的大小是相对于其父元素“circle”的100%宽。大家将其放置在“circle”元素的中心，并使用“transform:translateY(-50%)”属性将其向上移动50%的高度，使其准确地居中。

这样就完成了大家的任务！现在，大家的圆上有了一个漂亮的黑色中心线。你可以根据自己的需要调整圆形的大小、边框和线条的颜色和粗细。希望这篇文章对你有帮助。