css - 同心圆与 CSS

Question

有谁知道如何仅使用 CSS 绘制像 RAF 符号(同心红色、白色和蓝色圆圈)这样的同心圆？

Answer 1

您可以使用以下方法制作 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>