html - 将 CSS 元素组合成一个元素

Question

我正在尝试使用 CSS 创建一个非常具体的图像(除非有我尚未发现的更好的方法)。我使用 Photoshop 创建了图像，但分辨率没有我想要的那么高。下面是代码和结果。不过，我想做的是将所有三种 CSS 样式组合成一个，这样每次我想显示图像时，就不必分别绘制三个圆圈。任何见解都会很棒，或者是实现相同目标的更好想法。

#box {
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-color: #74afad;
  position: absolute;
  border-radius: 100%;
  z-index: -1;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: middle;
}
#whiteCircle {
  display: block;
  width: 1.25em;
  height: 1.25em;
  background-color: white;
  position: relative;
  border-radius: 100%;
  z-index: 0;
  margin-top: 50%;
  top: -.625em;
  margin-left: 50%;
  left: -.625em;
  vertical-align: middle;
}
#orangeCircle {
  display: block;
  width: 1em;
  height: 1em;
  background-color: #ff7e00;
  position: absolute;
  border-radius: 100%;
  z-index: 1;
  margin-top: 50%;
  margin-left: 50%;
  top: -.5em;
  left: -.5em;
  vertical-align: middle;
}

<div id="box">
  <div id="whiteCircle">
    <div id="orangeCircle">
    </div>
  </div>
</div>

谢谢!

Answer 1

您可以通过使用伪元素而不是显式 div 标记将所有内容简化为单个 CSS 类。

不使用 id 选择器，而是使用类(.box 而不是 #box)，然后您可以在整个页面中安全地重用该类。

#box {
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-color: #74afad;
  position: absolute;
  border-radius: 100%;
  z-index: -1;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: middle;
}
#box:before {
  content: '';
  display: block;
  width: 1.25em;
  height: 1.25em;
  background-color: white;
  position: relative;
  border-radius: 100%;
  z-index: 0;
  margin-top: 50%;
  top: -.625em;
  margin-left: 50%;
  left: -.625em;
  vertical-align: middle;
}
#box:after {
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  background-color: #ff7e00;
  position: absolute;
  border-radius: 100%;
  z-index: 1;
  margin-top: 50%;
  margin-left: 50%;
  top: -.5em;
  left: -.5em;
  vertical-align: middle;
}

<div id="box"></div>