在CSS中创建同心圆

Question

我试图创建一堆纯粹使用CSS的同心圆.这是我的CSS:

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

}

到目前为止我的尝试在这里:http://jsfiddle.net/4yL2m/

但是,正如您在链接中看到的,我只能根据画布区域的宽度和高度创建椭圆.谁能建议如何通过在自身内嵌相同的div来绘制完美的同心圆？

Answer 1

我无法看到为最外圈指定精确尺寸(宽度/高度相等)的方法.你可以给它自己的类

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

如果设置为内圈,则内圈将与边框/填充同心,box-sizing: border-box因为边框/填充将包含在尺寸中. margin是不包括在此,并且因此不期望的.您还需要指定height: 100%.

http://jsfiddle.net/4yL2m/8/

请注意,包含div也不必是圆形div之一; 它可以.

注意为了将它用于firefox你需要设置-moz-box-sizing: border-box;以及boxing-sizing: border-box;.