Html 我如何用CSS编码一个有3个均匀分布的圆的条？ 我想在我的网站底部显示一条线，底部有三个圆圈，第一个在左边，第二个在中间，第三个在右边。如何使用CSS实现这一点

下面是我如何用CSS制作的

CSS

.lineB {
  height: 60px;
  width: 100%;
  position: relative;
  top: 50px;
}

.lineL {
  height: 2px;
  background: #2b2b2b;
  width: 45%;
  top: 25px;
  left: 0;
  position: absolute;
  display: block;
}

.lineR {
  height: 2px;
  background: #2b2b2b;
  width: 45%;
  top: 25px;
  right: 0;
  position: absolute;
  display: block;
}

.circles {
  width: 118px;
  margin: 0 auto;
}

.circle {
  width: 2em;
  height: 2em;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #2b2b2b;
}

.C {
  width: 2.5em;
  height: 2.5em;
}

HTML

<div class="lineB">
<span class="lineL"></span>
<span class="lineR"></span>
<div class="circles">
    <span class="circle"></span>
    <span class="circle C"></span>
    <span class="circle"></span>
</div>

下面是将显示其外观的示例

我强烈建议您只制作一个

SVG

（可伸缩矢量图形）图像，以获得更好的灵活性

SVG

图像文件具有惊人的灵活性，可以扩展到任何屏幕大小。

Hy user2961662

我会使用伪类，因为这是最快的方法：

element:after{}
element:before{}

这实际上取决于你真正需要什么；继续看我下面的例子

---

干杯

您可以使用canvas对象（HTML5）——它允许许多与图形相关的事情。可以找到关于HTML5画布的教程。此外，您还可以找到一个更特定于圆的链接。对于线条，如果不想使用画布，可以使用边框轮廓轻松完成

你希望圆圈看起来怎么样？像图像、文本或其他？你是在问如何画一条线和三个圆吗？你可以制作一个PNG或SVG或一个CSS专用的解决方案。一个

SVG

图像将以

宽度：100%覆盖每个屏幕大小。是的，但在我看来，仅仅3圈就有点“过火”；我会用SVG来描绘大局stuff@Crispy-乔治：我百分之百同意这一点，所有这些代码都是针对页面上这样一个小元素的<代码>SVG

图像位于：P