border-radius на родительском элементе

Question

Можно ли отобразить целый контейнер со всем его содержимым в виде круга? Я не хочу, чтобы дочерние элементы отображались как круг самостоятельно, но в целом.

<div id="container"> 
    <div id="header"></div> 
    <div id="content"></div> 
</div> 

Fiddle

---

Решено Редактировать:

Спасибо, ребята, "(переполнение: скрытый}". Решить ее

Fiddle of what I wanted to achieve

Answer 1

Вам нужно box-sizing : border-box

Свойства ширины и высоты включают отступы и границы, но не маржу. Это полевая модель, используемая Internet Explorer, когда документ находится в режиме Quirks. Примечание: Прокладка & будет находиться внутри коробки, например. IF .box {width: 350px}; Затем можно применить {граница: 10px сплошного черного цвета;} РЕЗУЛЬТАТ {отображаются в браузере} .box {ширина: 350px;}

overflow: hidden

Содержание усекается и не указаны полосы прокрутки.

и border-radius: 50%

#container { 
border-radius: 50% 
overflow:hidden; 
} 

здесь демонстрационный

*{box-sizing: border-box} 
 
:root{ 
 
    padding-top: 40px; 
 
    background: #ccc 
 
} 
 
#container{ 
 
    border-radius: 50%; 
 
    overflow: hidden; 
 
    width: 480px; 
 
    height: 480px; 
 
    padding: 70px; /*you need this to keep all child visible (horizontally)*/ 
 
    background: white; 
 
    color: #ccc; 
 
    text-align: center 
 
}

<div id="container"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum 
 
    
 
    </div> 
 
</div>

Answer 2

Если то, что вы пытаетесь сделать, это превратить ваши прямоугольники в круги, просто добавьте border-radius: 100% к вашему коду CSS.

Answer 3

Как указано в вопросе Заголовок вам нужно использовать CSS border-radius

вам необходимо установить его на 50%

По пути: Я просто Googled CSS Circle и тыс моя первая запись: http://davidwalsh.name/css-circles Wich точно stetes как

Answer 4

Я создал JS скрипку для вас (http://jsfiddle.net/4w18xt5v/)

Сообщите мне, если это то, что вы имели в виду?

// CSS

#container{ 
    display: -webkit-flex; 
    display: flex; 
    -webkit-justify-content: center; 
    justify-content: center; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    height: 400px; 
    width: 400px; 
    border-radius: 50%; 
    background: #5c5c5c; 
} 
#header{ 
    display: -webkit-flex; 
    display: flex; 
    color: #fff; 
} 
#content{ 
    display: -webkit-flex; 
    display: flex; 
    color: #fff; 
}