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>

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

这是使用HTML / CSS创建三个同心圆的简单方法。 您可以按照相同的逻辑添加任意多个圆圈。

＆＃13;

＆＃13;

.circle
{
  border-radius:50%;
}
.inner
{
  background-color:#666;
  height:32px;
  width:32px;
  margin:16px;
  display: inline-block;
}
.middle
{
  background-color:#888;
  height:64px;
  width:64px;
  margin:32px;
  display: inline-block;
 
}
.outer
{
  background-color:#aaa;
  height:128px;
  width:128px;
  margin-top:64px;
  display: inline-block;
}

＆＃13;

<div class="outer circle">
	<div class="middle circle">
		<div class="inner circle"></div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是另一种使用box-shadow和border属性的方法

.circle
{
  height:70px;
  width:70px;
  background-color:red;
  border:24px solid white;
  box-shadow: 0px 0px 0px 24px blue;
  border-radius:50%;
}

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

Answer 5

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

现在是html;

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