Как сделать один круг внутри другого с помощью CSS

Ответ 1

Ta da!

Объяснено в комментариях 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>

Ответ 2

Вам не нужны дополнительные элементы в CSS3

Вы можете сделать все это с помощью одного элемента и теневой коробки.

JSFiddle Demo.

CSS

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

Ответ 3

Используйте 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*/
}

Ответ 4

Кажется, что 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;
}

Ответ 5

взгляните на это fiddle

который автоматически вычисляет центрирование

#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;
}

Ответ 6

Просто используйте box-shadow, чтобы получить необходимый эффект:

Демо в скрипке: http://jsfiddle.net/972SF/16/

html сводится к:

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

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;
}

просто, легко и уверенно, что ваши круги всегда идеально расположены рядом друг с другом.

Вы можете изменить размер круга, изменив 4-е свойство (100 пикселей) на тень окна на то, что вы хотите.

Ответ 7

Вот пример круга с внешней границей.

HTML:

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

Стили:

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

Смотреть результаты: JSFiddle

Ответ 8

Попробуйте,

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

Здесь ur Обновлено JSFIDDLE

Ответ 9

Посмотрите, как я позиционировал Divs. Только радиус границы должен выполнять Job

.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

Ответ 10

попытайтесь дать внутреннюю окружность a top:50% и чем margin-top: значение nagative из половины высоты внутреннего цикла.

http://jsfiddle.net/972SF/19/

Ответ 11

РЕШИТЬ! Точно так, как вы хотите:

DEMO: http://jsfiddle.net/aniruddha153/RLWua/

HTML:

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

CSS

#content {
   position: relative;
   width: 100%;
   padding-bottom: 100%;
}

#outer-circle {
   position: absolute;
   width: 50%;
   height: 50%;
   background-color: #000000;
   border-radius: 50%;
}

#inner-circle{
  margin-top: 25%;
  margin-left: 25%;
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #e5e5e5;
  border-radius: 50%;
}