我有一个 div(下图中的蓝色)。我需要在其中创建一些等距的圆圈。这可以用 CSS 生成的内容来完成吗?我可以使用 :before 和 :after 伪类创建 2,但是当我需要更多时,CSS 解决方案是否需要更多的 html 元素?
我希望不必使用图像来缩短加载时间并针对不同的显示密度设备优化网站。
更新这是针对响应式设计的,因此蓝色 div 的宽度会有所不同。它们还需要保持等距。
最佳答案
好吧,我们可以为每个元素只创建两个伪元素。
但是,我们可以通过多个 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;
}
更新
不幸的是,无法设置相对于包含 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 .
关于css - 使用 CSS 生成的内容创建多个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21585318/