带CSS的同心圆

有人知道如何只使用CSS绘制像RAF符号（红色、白色和蓝色同心圆）这样的同心圆吗

---

这是一项非常简单的任务。创建3个div，每个div具有

宽度

=

高度

，但它们的大小都不同。给他们

边界半径：50%，给它们上色，然后使用
位置：绝对和相对以使其居中。也可以使用flexbox。但这只是一幅草图，花了3分钟才完成


HTML

<div class="blue">
  <div class="white">
    <div class="red"></div>
  </div>
</div>

您可以使用以下各项创建3个同心圆：


一个元素
边界半径：50%使形状为圆形

填充和
背景剪辑：内容框

蓝色外圆的边框


div{
宽度：80px；
高度：80px；
边界半径：50%；
背景色：#CE1126；
背景剪辑：内容框；
填充：40px；
边框：40px实心#00247D；
}
下面是一个使用HTML/CSS创建三个同心圆的简单方法。
按照相同的逻辑，可以添加任意多的圆


.circle
{
边界半径：50%；
}
内部的
{
背景色：#666；
高度：32px；
宽度：32px；
利润率：16px；
显示：内联块；
}
中间的
{
背景色：#888；
高度：64px；
宽度：64px；
利润率：32px；
显示：内联块；
}
外面的
{
背景色：#aaa；
高度：128px；
宽度：128px；
利润上限：64px；
显示：内联块；
}
这是使用框阴影和边框属性的另一种方法


.circle
{
高度：70像素；
宽度：70px；
背景色：红色；
边框：24px纯白；
盒影：0px 0px 0px 24px蓝色；
边界半径：50%；
}

现在是html

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

大多数解决方案都很好，但我们也可以使用
：：伪元素来实现这一点。这里container是一个简单的类，仅使用一个div和伪元素生成三个cirlce
：after
和
：：before


使用单个选择器，我们通过添加填充、背景剪辑来增加同心圆


.container{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}
.圆圈{
宽度：100px；
高度：100px；
背景色：红色；
边界半径：50%；
位置：相对位置；
}
.圆圈：：之后{
内容：''；
背景颜色：黄色；
宽度：200px；
高度：200px；
位置：绝对位置；
z指数：-1；
边界半径：50%；
顶部：-50px；
左：-50px；
}
.圆圈：：之前{
内容：''；
背景颜色：粉红色；
宽度：300px；
高度：300px；
位置：绝对位置；
z指数：-1；
边界半径：50%；
顶部：-100px；
左：-100px；
}

投票通过，因为这是一个非常普遍/有用且客观的问题。您能在回答中添加一些解释吗？对某些人来说，只显示代码可能会令人困惑。是的，为什么不呢？事实上，我认为代码是非常不言自明的。无论如何，我把div一个接一个地画出来，并给它们分配了一个类圆，在这里我添加了边界半径属性50%。现在使用css sudo类第一个类型I在最外层的div中添加了一些宽度和高度，这是最大的div，并添加了蓝色背景色。现在中间div由直接子选择器选择，但没有添加任何背景色；假设默认背景色为白色。最后选择了最内部的div并添加了红色背景色。您的解决方案很好，但我们也可以使用：：before或：：after来实现这一点，如果您满意，我可以编辑解决方案的代码。你可以找到jsfiddle a@zakir，我看到你已经用这种方法添加了一个aswer，所以不需要在这个问题中编辑它。我非常喜欢插入边框的方法，但是有些颜色在chrome中有一个难看的光环。在这种情况下，蓝色足够暗，足以遮住红色光环，但我尝试了其他颜色，看到了一个光环。@Louiseegleton你能和我分享一把小提琴或其他显示光环的例子吗？光环的例子我所做的只是改变颜色。这个问题与使用边框半径和框阴影有关
.circle
{
    border-radius : 50%;
    border : 1px solid black
}
.circle:first-of-type
{
    width : 150px;
    height : 150px;
    background-color : blue
}
.circle:first-of-type > .circle
{
    width : 100px;
    height : 100px
}
.circle .circle .circle
{
    width : 50px;
    height : 50px;
    background-color : red
}

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