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