Html 如何在不使用溢出的情况下获得圆角：隐藏或对未知数量的子元素应用边界半径？

我有一个应该有圆角的容器元素。这个元素（

well

）应该是一段可重用的HTML和CSS，可以包含一些具有既定样式的常见子元素，例如主区域或次区域（

well\uu primary

，

well\uu secondary

），以及一次性样式的可能性（

well\uu custom

）。这些二级元素可以任意顺序和数量使用，每个二级元素可以包含任意子元素

首先，我在最外层的容器上使用了

边界半径

，再加上

溢出：隐藏

，以防止内部元素的方形角泄漏。这很好：

.body{
背景色：#000；
填充：1em；
}
.嗯{
利润率：1米0；
边框：1px实心#000；
边界半径：1米；
溢出：隐藏；
}
.well_uu小学{
背景色：#fff；
}
.好的{
边框顶部：1px实心#ccc；
边框底部：1px实心#ccc；
背景色：#eee；
}
.首先{
边框左上半径：1米；
边框右上角半径：1米；
}
.嗯，最后{
边框左下半径：1米；
边框右下半径：1米；
}
.项目{
填充：1em；
}
.项目——特别{
显示器：flex；
}
.项目-特别左边{
flex:1自动；
背景色：#88f；
}
.项目——特别权利{
flex:1自动；
背景色：#8f8；
}

主要内容
次要内容
次要内容
主要内容
主要内容
左边
赖特

继承是一种选择吗？（例如，

边框左下半径：继承；

）。注意，我还有

.item--special

继承边界半径

.body{
背景色：#000；
填充：1em；
}
.嗯{
利润率：1米0；
边框：1px实心#000；
}
.well_uu小学{
背景色：#fff；
}
.好的{
边框顶部：1px实心#ccc；
边框底部：1px实心#ccc；
背景色：#eee；
}
.首先{
边框左上半径：1米；
边框右上角半径：1米；
}
.嗯，最后{
边框左下半径：1米；
边框右下半径：1米；
}
.项目{
填充：1em；
}
.项目——特别{
显示器：flex；
边界半径：继承；
}
.项目-特别左边{
flex:1自动；
背景色：#88f；
边框左下半径：继承；
}
.项目——特别权利{
flex:1自动；
背景色：#8f8；
边框右下半径：继承；
}
.尴尬{
位置：相对位置；
}
.笨拙的文本{
位置：绝对位置；
背景色：#f88；
宽度：100px；
高度：100px；
}

主要内容
次要内容
你好
次要内容
主要内容
你好
主要内容
左边
你好
赖特

对于带有“填充”颜色的圆角，您必须将

边框半径

应用于添加背景本身的元素。你能不能给

添加一个
边界半径
。笨拙的文本

？@obsidiange也许我解释得不好<代码>笨拙的文本不应具有圆角。这是由第三方提供的绝对定位面板，我无法直接控制。是否可以

。well\u secondary

/

。well\u primary

/

。well\u custom

滚动？如果没有，你打算如何处理第三方位来修复它延伸到容器外部的问题——使容器更大？@cjl750真的没有想过垂直滚动。事实上，我同意面板延伸到容器之外。如果显示时面板占用了空间，我也没问题，但我的印象是，面板的绝对位置会使其脱离流程，所以这是不可能的。我想避免在任何时候都给容器添加空白区域，因为它不打开时会很碍眼。它也不是很灵活，因为容器必须知道任何可能发生在容器内的孩子的所有可能高度。不幸的是，除了使用通配符选择器为所有子项指定边界半径之外，我没有其他解决方案。我想不出别的办法了。我能想到的另一个黑客解决方案是，你可以创建一个小的、正方形的图像，除了一个角落充满了你的页面背景色之外，它是透明的，然后将它覆盖在

。well\u first

和

。well\u last

上，作为伪元素的

背景图像。Idk如何在CSS中创建该形状（包括与边界半径相匹配的曲线）。我是否正确理解了可能要放置在井内的每个元素都需要设置
边界半径：inherit
，以防它放置在井内？@Shepmaster不幸的是，是的。使用此方法，您需要确保任何具有背景的子体元素都模仿或继承边界半径。这里真正的问题是，如果正在使用背景，边界半径需要有
溢出：隐藏
，但您不能选择哪些元素溢出，哪些不溢出。面具怎么样？背景（演示中的黑色部分）是否始终为纯色？您可以使用伪元素创建圆角效果，通过匹配背景颜色使拐角看起来像是透明的。啊，看起来每个组件都必须知道它在井中的位置。设置
border-r