在CSS中创建同心圆

我试图纯粹使用CSS创建一组同心圆。以下是我的CSS：

.inner-circle{
height: inherit;
width: inherit;
background: #FFF;
border: 1px solid #1a1a1a;
border-radius: 50%;
padding: 5px;
margin: 1%;

}

到目前为止，我的尝试是：

---

但是，正如您在链接中看到的，我只能根据画布区域的宽度和高度创建椭圆。有人能建议如何通过将同一个div嵌套在其内部来绘制完美的同心圆吗？

基本上，您需要将纵横比固定在1:1。显然，webkit浏览器可以识别纵横比CSS属性，但它不能跨平台工作。有关更多详细信息，请参见，包括一些跨浏览器解决方法。

基本上，您需要将纵横比固定为1:1。显然，webkit浏览器可以识别纵横比CSS属性，但它不能跨平台工作。有关更多详细信息，请参见，包括一些跨浏览器解决方法。

我看不到任何方法可以为最外层的圆指定宽度/高度相等的精确尺寸。你可以给它自己的类

<div class="inner-two container">
.container {
    width: 100px;
    height: 100px;
    margin: 1%;
}

如果将内圆设置为“框大小：边框框”，则内圆将与边框/填充同心，因为边框/填充将包含在尺寸中。保证金不包括在本表中，因此不受欢迎。您还需要指定高度：100%

请注意，包含的div不一定也必须是圆div之一；这是可能的

---

注意：为了在firefox中使用它，您需要设置-moz-box size:border-box；以及装箱尺寸：border box

我看不出有什么办法可以为最外层的圆指定宽度/高度相等的精确尺寸。你可以给它自己的类

<div class="inner-two container">
.container {
    width: 100px;
    height: 100px;
    margin: 1%;
}

如果将内圆设置为“框大小：边框框”，则内圆将与边框/填充同心，因为边框/填充将包含在尺寸中。保证金不包括在本表中，因此不受欢迎。您还需要指定高度：100%

请注意，包含的div不一定也必须是圆div之一；这是可能的

---

注意：为了在firefox中使用它，您需要设置-moz-box size:border-box；以及装箱尺寸：border box

这可能会让你更亲近

.inner-two{
height: 0px;
width: 50%;
background: #FFF;
    border: 1px solid #1a1a1a;
border-radius: 50%;
padding-bottom: 50%;
    margin:25%;
}

---

这可能会让你更亲近

.inner-two{
height: 0px;
width: 50%;
background: #FFF;
    border: 1px solid #1a1a1a;
border-radius: 50%;
padding-bottom: 50%;
    margin:25%;
}

只需添加：

display: table-cell;
text-align: center;
vertical-align: middle;

只需添加：

display: table-cell;
text-align: center;
vertical-align: middle;

这里我用CSS画了3个圆。中间圆正好位于最外层和最内层圆之间的中心。换句话说

中间圆半径=外圆半径+内圆半径/2

这里每个圆都用一个DIV表示

HTML

CSS

这里我用CSS画了3个圆。中间圆正好位于最外层和最内层圆之间的中心。换句话说

中间圆半径=外圆半径+内圆半径/2

这里每个圆都用一个DIV表示

HTML

CSS

---

你想让高度等于宽度吗？是的，当你得到一个完美的圆时。你想让高度等于宽度吗？是的，当你得到一个完美的圆时。@Yahreen use-moz-box-sizing@Yahreen使用-moz盒大小调整