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属性包括填充和边框，但是不是保证金。这是Internet Explorer使用的盒子模型文档处于Quirks模式。注意：填充＆amp;边境将在里面例如，盒子IF .box {width：350px};然后你申请{border：10px 纯黑;} RESULT {在浏览器中呈现} .box {width：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

正如您在问题标题中所述，您需要使用CSS border-radius

您需要将其设置为50％

顺便说一句：我只是用Google搜索CSS Circle这是我的第一个条目：http://davidwalsh.name/css-circles 这完全是如何

Answer 3

我为你创建了一个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;
}

Answer 4

如果你要做的是将矩形变成圆形，只需将border-radius: 100%添加到CSS代码中即可。

父元素上的border-radius

4 个答案: