孩子元素bg彩色剪辑给父母边界半径

任何人都知道强制孩子元素留在他们父母的边界范围内的绝对方式？孩子元素bg彩色剪辑给父母边界半径

下面是一个JS提琴样品我的工作： http://jsfiddle.net/fuego/qCNRZ/

标记：

<div id="outer"> 
    <div id="inner"> 
     Nah nah nah<br/> 
     Nah nah nah<br/> 
     Nah nah nah<br/> 
     Nah nah nah<br/> 
     Nah nah nah<br/> 
     Nah nah nah<br/> 
     Nah nah nah<br/> 
     Nah nah nah<br/> 
    </div> 
</div>

CSS：

#outer { 
    width: 300px; 
    background: red; 
    border-radius:20px; 

} 

#inner { 
    background:blue; 
}

我只是想现在容器出现蓝色，但与父母圆润的边缘。我更新了小提琴以反映。

来源

2011-10-19 Fuego DeBassi

我认为你需要张贴你想要的图表。 –

可靠的事情：http://cl.ly/463s090Q412P1u0t2s0t边界半径设置的唯一位置在外侧，内侧恰好适合它。我不想明确地设置额外的边框半径来匹配内部。它剪辑！ –

所以你想要一个50/50分割？ –

-1

刚需距设置http://jsfiddle.net/jalbertbowdenii/83Xrs/2/

来源

2011-10-19 17:46:47 albert

只有这样，才能实现你的愿望纯CSS是添加border-radius两个div。

#outer { 
    width: 300px; 
    background: red; 
    border-radius:20px; 
    height:400px; 
} 

#inner { 
    background:blue; 
    border-radius:20px 20px 0 0; 
    padding-left:10px; 
}

演示：根据你的榜样http://jsfiddle.net/tZ8AL/1/

来源

2011-10-19 18:01:16 Sotiris

就足够了添加overflow:hidden您#outer元素。

来源

2012-09-27 14:06:30

这是正确的答案。如果没有这个属性，默认情况下父级的边框半径不应该裁剪其子内容：http://stackoverflow.com/questions/8582176/should-border-radius-clip-the-content/8582304#8582304 – BoltClock

添加“overflow：hidden;”到外部div将解决您的问题。干杯。

来源

2014-11-29 08:15:55 Griffin

孩子元素bg彩色剪辑给父母边界半径

回答

相关问题