如何使用 CSS 在另一个圆圈内制作一个圆圈

How to make one circle inside of another using CSS

提问by scapegoat17

I am trying to make one circle inside of another circle using css, but I am having an issue making it completely centered. I am close, but still not there. Any ideas?

我正在尝试使用 css 在另一个圆圈内制作一个圆圈，但我遇到了使其完全居中的问题。我很接近，但仍然不在那里。有任何想法吗？

<div id="content">
    <h1>Test Circle</h1>
    <div id="outer-circle">
        <div id="inner-circle">
            <span id="inside-content"></span>
        </div>
    </div>
</div>

Here is my CSS:

这是我的 CSS：

#outer-circle {
    background: #385a94;
    border-radius: 50%;
    height:500px;
    width:500px;
}
#inner-circle {
    position: relative;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
    margin: 0px 0px 0px 100px;
}

Also, here is a fiddle: http://jsfiddle.net/972SF/

另外，这里有一个小提琴：http: //jsfiddle.net/972SF/

回答by misterManSam

Ta da!

哒哒！

Explained in the CSS comments:

在 CSS 注释中解释：

 #outer-circle {
   background: #385a94;
   border-radius: 50%;
   height: 500px;
   width: 500px;
   position: relative;
   /* 
    Child elements with absolute positioning will be 
    positioned relative to this div 
   */
 }
 #inner-circle {
   position: absolute;
   background: #a9aaab;
   border-radius: 50%;
   height: 300px;
   width: 300px;
   /*
    Put top edge and left edge in the center
   */
   top: 50%;
   left: 50%;
   margin: -150px 0px 0px -150px;
   /* 
    Offset the position correctly with
    minus half of the width and minus half of the height 
   */
 }

<div id="outer-circle">
  <div id="inner-circle">

  </div>
</div>

回答by Paulie_D

You don't need extra elements in CSS3

CSS3 中不需要额外的元素

You can do it all with one element and a box-shadow.

你可以用一个元素和一个框阴影来完成这一切。

JSFiddle Demo.

JSFiddle 演示。

CSS

CSS

#outer-circle {
    background: #385a94;
    border-radius: 50%;
    height:300px;
    width:300px;
    position: relative;
    box-shadow: 0 0 0 100px black;
    margin:100px;
}

回答by Suprabha

Solved this by using CSS transform property:

通过使用 CSS transform 属性解决了这个问题：

You can refer to this JS fiddle linkfor below output: http://jsfiddle.net/suprabhasupi/74b1ptne/

您可以参考JS fiddle link以下输出：http: //jsfiddle.net/suprabhasupi/74b1ptne/

div {
  border-radius: 50%;
  /* border: 1px solid red; */
}

.circle1 {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: red;
}

.circle2 {
  transform: translate(25%, 25%);
  width: 200px;
  height: 200px;
  background-color: green;
}

.circle3 {
   transform: translate(48%, 46%);
  width: 100px;
  height: 100px;
  background-color: blue;
}

<div class="circle1">
  <div class="circle2">
    <div class="circle3">
    
    </div>
  </div>
</div>

回答by Zeta

Use position: relativeon the outer circle, position:absoluteon the inner circle, and set all offset to the same value. Let the automatic calculation of height and width handle the rest (JSFiddle):

使用position: relative在外圆上，position:absolute在内部循环，并设置所有偏移量相同的值。让高度和宽度的自动计算处理其余的（JSFiddle）：

#outer-circle {
    position:relative;
    background: #385a94;
    border-radius: 50%;
    height:500px;
    width:500px;
}
#inner-circle { 
    position:absolute;
    background: #a9aaab;
    border-radius: 50%;
    right: 100px;
    left: 100px;
    top: 100px;
    bottom: 100px;
    /* no margin, no width, they get automatically calculated*/
}

回答by davidkonrad

Seems that topis the only thing you need to alter -> http://jsfiddle.net/972SF/12/

似乎这top是您唯一需要更改的内容-> http://jsfiddle.net/972SF/12/

#inner-circle {
    position: relative;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
    top: 100px; /* <--- */
    margin: 0px 0px 0px 100px;
}

回答by agconti

Just use box-shadowto get the effect you want:

只需使用box-shadow即可获得您想要的效果：

Demo in a fiddle: http://jsfiddle.net/972SF/16/

小提琴演示：http: //jsfiddle.net/972SF/16/

The html is reduced to:

html 缩减为：

<div id="content">
    <h1>Test Circle</h1>
    <div id="circle">
    </div>
</div>

Css:

css：

#circle {
    margin: 10em auto;
    background: #385a94;
    border-radius: 50%;
    height:200px;
    width:200px;
    -webkit-box-shadow: 1px 1px 0px 100px black;
       -moz-box-shadow: 1px 1px 0px 100px black;
            box-shadow: 1px 1px 0px 100px black;
}

its simple, easy, and makes sure that your circles are always perfectly positioned next to each other.

它简单、容易，并确保您的圈子始终完美地彼此相邻。

You can change the size of the circle by changing the 4th property ( 100px ) on box-shadow to what ever you want.

您可以通过将 box-shadow 上的第 4 个属性 ( 100px ) 更改为您想要的大小来更改圆圈的大小。

回答by Lord Nighton

Here is an example of a circle with outer border.

这是一个带有外边框的圆的示例。

HTML:

HTML：

<div id="inner-circle"></div>

Styles:

款式：

    #inner-circle {
    background: #385a94;
    border : 2px solid white;
    border-radius: 50%;
    height:30px;
    width:30px;
    position: relative;
    box-shadow: 0 0 0 1px #cfd1d1;
    }

See results: JSFiddle

查看结果： JSFiddle

回答by syd619

take a look at this fiddle

看看这个小提琴

which calculates centering automatically

自动计算居中

#outer-circle {
    background: #385a94;
    border-radius: 50%;
    height:500px;
    width:500px;
    display:table-cell;
    vertical-align:middle;
}
#inner-circle {
    display:inline-block;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
}

回答by Santhosh Kumar

Try,

尝试，

 #inner-circle {
    position: absolute;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
    margin: 15% 0px 0px 100px;
}

Here is ur Updated JSFIDDLE

这是你更新的JSFIDDLE

回答by defau1t

See How I have positioned the Divs, Just border-radius should do the Job

看看我是如何定位 Divs 的，只是 border-radius 应该做的工作

.outer{width:500px;height:500px;background:#f00;border-radius:50%;position:relative;top:0;left:100;}
.inner{width:250px;height:250px;background:#000;border-radius:50%;position:absolute;top:125;left:125;}



   <div class="outer">

      <div class="inner">


      </div>

    </div>

DEMO

演示