使用CSS绘制同心圆

Question

有人知道如何仅使用CSS绘制同心圆，就像RAF标志（同心的红、白和蓝圆）一样吗？

- Tom Chambers

---

投票开放，因为这是非常一般性/有用和客观的问题。 - Grijesh Chauhan

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中使用多个box-shadow重叠圆形的方法描述，如上所述。

注意：如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元素的示例：

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

- web-tiki

---

我非常喜欢内置边框的方法，但在某些颜色上，Chrome浏览器中会出现不好看的光晕。在这种情况下，蓝色足够深，可以掩盖那个红色的光晕，但我尝试了其他颜色，发现有光晕。 - Louise Eggleton

@LouiseEggleton能否分享一个示例，使用Fiddle或其他工具展示那个光圈？ - web-tiki

示例代码：https://jsfiddle.net/womvgbzf/ 我所做的只是改变了颜色。问题与使用border-radius和box-shadow有关。 - Louise Eggleton

@LouiseEggleton 好的，我明白了。我已经进行了多次测试，但是找不到合适的解决方法。这明显是一个 bug（我在 Firefox 67.0b10 中也看到了它）。 - web-tiki

当它不产生这个错误时，我仍然更喜欢双重插入框阴影技术。我正在使用透明度来获得漂亮的单色外观 https://jsfiddle.net/louiseeggleton/aub576dw/2/ - Louise Eggleton

Answer 2

大多数解决方案都很好，但是我们也可以使用::伪元素来实现这个效果。容器是一个简单的类，只用于包装。这三个圆圈只使用一个

和伪元素::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>

- zakir

Answer 3

这是一个相当简单的任务。创建 3 个 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;
}

- knitevision

Answer 4

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

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

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

- medunes

Answer 5

这是另一种使用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>

- medunes

Answer 6

我在面试中遇到了这个问题，要求将三个圆圈放置在页面中央。我是用以下方法实现的。

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid black;
  border-radius: 50%;
}


.first {
  width: 300px;
  height: 300px;
}

.second {
  width: 200px;
  height: 200px;
}

.third {
  width: 100px;
  height: 100px;
}

<div class='first center'>
  <div class='second center'>
    <div class='third center'></div>
  </div>
</div>

关于您的问题，除了将其定位在页面中心外，您还可以将class为'first'的div定位为相对位置，并根据需要填充背景颜色。

- Sagar Kadu

Answer 7

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

- KOUSIK MANDAL

---

你能为你的答案添加一些解释吗？仅显示代码可能会让一些人感到困惑。 - André Kool

为什么不呢？实际上，我认为代码已经很容易理解了。无论如何，我正在制作一个嵌套的 div，并给它们分配了一个名为 circle 的类，其中添加了 border-radius 属性 50%。现在使用 css 伪类 first-of-type，在最外层的 div 中添加了一些宽度和高度，并添加了背景颜色蓝色。现在通过直接子选择器选择了中等大小的 div，但没有添加任何背景颜色；假设默认的背景颜色是白色。最后选择了最内部的 div 并添加了红色背景颜色。 - KOUSIK MANDAL

Answer 8

<!DOCTYPE html>
<html>
<body>
<script>
function round(x) {

text +=  '<circle cx="1000" cy="1000" r="'+ x +'"  stroke="black"stroke-width="4" fill="white" />'

}
</script>


<p id="demo"></p>
<script>
let text='<svg width="10000" height="10000">';
for( let x = 1000; x >0;x -= 50){
round(x);
}

text += '</svg>';

alert(text);
document. getElementById("demo").innerHTML=text

</script>

</body>
</html>

- Himanshu Vora

---

能否解释一下答案。 - Rajendran Nadar