在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;。

Answer 2

基本上，您需要將縱橫比固定爲1：1。顯然有一個aspect-ratio CSS屬性，Webkit瀏覽器認識到，但它不會跨平臺工作。有關更多詳細信息，請參閱this question，其中包括一些跨瀏覽器的解決方法。

Answer 3

這可能會讓你更接近;

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

Answer 4

只需添加：

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