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

只需添加：

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

Answer 3

这可能会让你更接近；

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

Answer 4

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

Answer 5

三个同心圆

在这里，我使用 CSS 绘制了 3 个圆圈。中间圆正好位于最外圆和最内圆之间。换句话说

中间圆的半径 = (外圆半径 + 内圆半径) / 2。

这里每个圆圈都由一个 DIV 表示。

HTML

<div class="parent">
        <div class="child1">
        &nbsp;
        </div>

        <div class="child2">
        &nbsp;
        </div>
  </div>

CSS

   <style>
     .parent {
            background-color:blue;
            width:400px; /* You can define it by % also */
            height:400px; /* You can define it by % also*/
            position:relative;
            border:1px solid black;
            border-radius: 50%;
       }
    .child1 {
            background-color:lime;
            top: 10%; left:10%; /* of the container */
            width:80%; /* of the outer-1 */
            height:80%; /* of the outer-1 */
            position: absolute;
            border:1px solid black;
            border-radius: 50%;
          }
    .child2 {
            background-color:yellow;
            top: 20%; left:20%; /* of the container */
            width:60%; /* of the inner-1 */
            height:60%; /* of the inner-1 */
            position: absolute;
            border:1px solid black;
            border-radius: 50%;
      }
  </style>