父DIV中的圆角不影响儿童DIV

时间:2011-03-11 19:26:46

标签: html css css3 hierarchy rounded-corners

所以,我正在尝试在CSS3中使用圆角(不是在IE中,不关心它是否在那里工作),而且我有DIV,我的所有内容看起来都很漂亮。我遇到的问题是,有些孩子的DIV没有被父母的圆角“遮盖”。我不是在寻找孩子继承圆角。我只想让父母内部的任何内容在圆角处不可见,就像它被掩盖了一样。我尝试使用“overflow:hidden;”,但这似乎没有成功。

有没有人有任何想法如何将圆角的容器DIV的孩子分类为父DIV?如果它有用,我正在使用“position:absolute;”在父DIV上。不确定这是否会有所不同。

谢谢!

2 个答案:

答案 0 :(得分:10)

尝试将overflow: hidden;添加到父元素。这解决了我的问题。

答案 1 :(得分:3)

在div上使用填充。如果你使填充等于半径,你不必担心任何重叠或内容出现在圆角区域。

<style>
.round{
border-radius:10px;
padding:10px;
background-color:red;
}
</style>

<div class="round">Rounded Corners</div>

这是一个有用的网站,介绍了CSS3 Border Radius:http://www.css3.info/preview/rounded-border/