使用CSS的同心圆

Question

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

​

​

Answer 1

可以使用以下命令创建3个同心圆：

对于红色和蓝色圆圈之间的白色间隙，使用element

• border-radius:50%;
• one element
• 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中描述的具有多个长方体阴影的方法。

注意:正如指出的，插入框-阴影会更好(不需要页边距，可以在形状上点击/悬停)

​

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>

​

Answer 2

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

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

HTML

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

Answer 3

大多数解决方案都很好，但我们也可以使用:: pseudo-elements来实现这一点。这里的容器是一个简单的包装类，这三个循环是使用一个div和伪元素::after和::before生成的。

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

​

.container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.circle{
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  position: relative;

}

.circle::after{
  content: '';
  background-color: yellow;
  width: 200px;
  height: 200px;
  position:absolute;
  z-index: -1;
  border-radius:50%;
  top: -50px;
  left:-50px;

}

.circle::before{
  content: '';
  background-color: pink;
  width: 300px;
  height: 300px;
  position:absolute;
  z-index: -1;
  border-radius:50%;
  top: -100px;
  left:-100px;

}

<div class="container">
<div class="circle">

</div>
</div>

​