css - 与CSS同心圆

有谁知道如何仅使用CSS绘制类似RAF符号的同心圆(红色，白色和蓝色同心圆)？

最佳答案

您可以使用以下方法制作3个同心圆:

一个元素

border-radius:50%;使形状变圆

红色和蓝色圆圈之间的白色间隙的

填充和background-clip:content-box;

外部蓝色圆圈的

边框

div{
    width:80px;
    height:80px;
    border-radius:50%;
    background-color:#CE1126;
    background-clip:content-box;
    padding:40px;
    border:40px solid #00247D;
}

<div></div>

您还可以将Overlapping circles in CSS with 1 div中描述的方法与多个框阴影一起使用。

注意:正如Harry指出的那样，插入框阴影会更好(不需要边距，并且可以在整个形状上单击/悬停)

div {
  background-color: #CE1126;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 40px #00247D, inset 0 0 0 80px #fff;
}

<div></div>

您也可以使用SVG制作同心圆。这是使用circle element的示例:

<svg viewBox="0 0 10 10" width="30%">
  <circle cx="5" cy="5" r="4" stroke-width="1.5" stroke="#00247D" fill="#fff"/>
  <circle cx="5" cy="5" r="2" fill="#CE1126"/>
</svg>