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>

您还可以使用CSS中重叠圆圈中描述的方法,其中包含带有多个框阴影的1 div.

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

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元素的示例:

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

Answer 2

这是一个非常简单的任务。创建 3 个 div，每个都有width== height，但它们都有不同的大小。给它们border-radius: 50%;，给它们上色，然后用来position: absolute & relative;将它们居中。也许也可以使用弹性盒。但这只是一个草图，花了 3 分钟完成。

http://codepen.io/knitevision1/pen/NPMWwo

超文本标记语言

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

CSS

div {
  border-radius: 50%;
}

.blue {
  height: 200px;
  width: 200px;
  background-color: rgb(0, 36, 125);
  position: relative;
}

.white {
  height: 130px;
  width: 130px;
  background-color: #fff;
    position: absolute;
  top: 35px;
  left: 35px;
}

.red {
  height: 70px;
  width: 70px;
  background-color: rgb(206, 17, 38);
  position: absolute;
  top: 30px;
  left: 30px;
}