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

Question

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

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

UPDATE这是一个响应式设计，因此蓝色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

更新

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

因此，使用radial-gradient背景是您拥有的最佳选择（正如@Michal建议的那样）。

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

.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 。

Answer 2

您只需使用radial-gradient。

.circles {
  /* red: color of the circles */
  background-color: red;
  /* 40%: size of circles proportionally to size of an element they reside in */
  /* blue: color of the background */
  background-image: radial-gradient(closest-side, transparent 40%, blue 0%);
  /* 20%: width of circle, so 5 in row */
  /* 100%: height of circle, so 1 in column */
  background-size: 20% 100%;

  /* 20%: keep the aspect ration 5:1 for dynamic layout */
  padding-bottom: 20%; /* or padding-top */
  /* 100%: fill up given space */
  width: 100%;
  /* 0: so the possible content doesn't distort the aspect ratio */
  height: 0;
} 

演示http://jsfiddle.net/Gobie/t6X3Z/3/

Answer 3

如果您在容器div内放置多个嵌套div，则可以使用border-radius创建圈子。这样的事情可以解决问题：

HTML

<div id="container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

CSS

#container {
    width: 300px;
    height: 100px;
    background-color: blue;
}
.circle {
    border-radius: 50%;
    width: 50px;
    height: 50px; 
    background-color: red;
    margin: 10px;
    display: inline-block;
}

以下是其中的一个小提琴：http://jsfiddle.net/GXL3w/