html - 我如何用 CSS 编写一个在条上均匀分布的 3 个圆圈的条？

Question

我想在我的网站底部显示一条线，底部有三个圆圈，第一个在左边，第二个在中间，第三个在右边。我怎么能用 CSS 做到这一点？

Answer 1

这是我如何使用 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>

这是JSFIDDLE，它将显示它的外观。

我强烈建议您制作SVG（可缩放矢量图形）图像以获得更好的灵活性。

SVG图像文件非常灵活，可以跨越任何屏幕尺寸。

Answer 2

海用户2961662，

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

element:after{}
element:before{}

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

看一下这个

干杯!

Answer 3

您可以使用画布对象 (HTML5) - 它允许与图形做很多事情。可以在此处找到有关 HTML5 画布的教程。此外，您可以在此处找到更具体的圈子链接。对于线条，如果您不想使用画布，可以使用边框轮廓轻松完成。