Question

任何人都知道强迫儿童元素留在父母边界的一种万无一失的方法吗？

这是我正在使用的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;
}

我只是希望容器现在看起来是蓝色的，但是父母用圆角边缘。我更新了小提琴以反映。

Answer 1

根据您的示例，将overflow:hidden添加到#outer元素就足够了。

Answer 2

使用纯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/

Answer 3

添加＆＃34;溢出：隐藏;＆＃34;到外部div将解决您的问题。欢呼声。

Answer 4

只需要设置http://jsfiddle.net/jalbertbowdenii/83Xrs/2/

的边距

子元素bg颜色剪辑到父母边界半径

4 个答案: