父元素上的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

width和height属性包括填充和边界，但不 保证金。当 文档处于Quirks模式时，这是Internet Explorer使用的盒子模型。注意：填充&边框将在框内的 内。 IF .box {width：350px};然后应用{边界：10px的 纯黑色;}结果.box的{浏览器中呈现} {宽度：350像素;}

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

如果你想什么要做的就是把你的矩形变成圆圈，只需加上即可到您的CSS代码。

Answer 3

当您在问题标题说，你需要使用CSS border-radius

您需要将其设置为50％

顺便说一句：我只是谷歌搜索CSS Circle和部份是我的第一个条目：http://davidwalsh.name/css-circles 至极究竟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; 
}