子元素背景颜色剪辑到父元素边框半径

发布于 2024-12-10 23:58:47 字数 720 浏览 0 评论 0原文

有人知道强制子元素留在其父母的边界半径内的可靠方法吗？

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

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

原文

Anyone know of a surefire way to force child elements to stay in the border-radius of their parents?

Here is a js fiddle sample I'm working with:
http://jsfiddle.net/fuego/qCNRZ/

Markup:

<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;
}

I simply want the container to appear blue now, but with the parents rounded edges. I updated the fiddle to reflect.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陌上青苔 2024-12-17 23:58:47

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

回复收藏 0 原文

红尘作伴 2024-12-17 23:58:47

使用纯 css 实现您想要的效果的唯一方法是为两个 div 添加 border-radius。

#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/

The only way to achieve what you wish with pure css is to add border-radius for both div.

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

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

Demo: http://jsfiddle.net/tZ8AL/1/

回复收藏 0 原文