css - 使用 CSS 生成的内容创建多个元素？

Question

我有一个 div(下图中的蓝色)。我需要在其中创建一些等距的圆圈。这可以用 CSS 生成的内容来完成吗？我可以使用 :before 和 :after 伪类创建 2，但是当我需要更多时，CSS 解决方案是否需要更多的 html 元素？

我希望不必使用图像来缩短加载时间并针对不同的显示密度设备优化网站。

更新这是针对响应式设计的，因此蓝色 div 的宽度会有所不同。它们还需要保持等距。

Answer 1

好吧，我们可以为每个元素只创建两个伪元素。

但是，我们可以通过多个 box-shadow 值来伪造效果，如下所示:

.box:after {
    content: '';
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: orange;

    box-shadow: 25px 0 0 0 orange,  /* Or use positive offsets if needed */
               -25px 0 0 0 orange,
                50px 0 0 0 orange,
               -50px 0 0 0 orange;
}

WORKING DEMO .

更新

不幸的是，无法设置相对于包含 block 的宽度 的box-shadow 偏移量。 ( The best try 将使用相对的 em/rem 单位，但 font-size 本身不能根据宽度更改容器)

因此，使用 radial-gradient 背景是您最好的选择(如 @Michal 所建议)。

为了保持蓝色框的纵横比，您可以将高度设置为0并为padding-top使用百分比值code> 取决于包含框的宽度。

.box {
  background: orange radial-gradient(closest-side, transparent 40%, skyblue 0%);
  background-size: 20% 100%;
  width: 100%;
  height: 0;         /* Make sure that the box has no height */
  padding-top: 20%;  /* Keep 5:1 aspect ratio                */
}

这是 WORKING DEMO .