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。显然，webkit浏览器可以识别出aspect-ratio CSS属性，但它不能跨平台工作。有关详细信息，请参阅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;

Answer 5

Three concentric circles

在这里，我使用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>

在CSS中创建同心圆

5 个答案: