css - CSS-圆环不适合另一个圆环的中心

我不能使一个圆心位于另一个圆心内。

我不明白怎么了。
我也尝试过用正方形做，这也行不通。

这是我的jsfiddle。

.circle {
    width: 170px;
    height: 170px;
    border-radius: 85px 85px 85px 85px;
    background: lime;
}
.circle-inner {
width: 150px;
height: 150px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
border-radius: 75px 75px 75px 75px;
background: red;

最佳答案

您可以为两个容器设置相同的大小，并向包装器添加填充，例如padding:10px;。 DEMO。这是我想到的最简单的方法。

.circle {
    width: 150px;
    height: 150px;
    padding:10px;
    border-radius: 85px 85px 85px 85px;
    background: lime;
}

关于css - CSS-圆环不适合另一个圆环的中心，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25271509/