Html 溢出隐藏不完全隐藏具有边框半径的父div

我从下面的简单布局中得到一些剩余溢出。虽然效果很小，但效果非常明显，仅在设置边界半径时才会发生。预期的行为是使用

div class='inner'

，白色，完全覆盖

div class='outer'

，红色。然而，很明显，div的两端似乎都有剩余溢流

示例：

.outer{
背景色：红色；
宽度：500px；
高度：50px；
位置：相对位置；
溢出：隐藏；
边界半径：5雷姆；
}
.内部{
背景：白色；
宽度：100%；
身高：100%；
位置：绝对位置；
}

---

我建议的答案重复提到：

解决方案将根据具体情况而定。。。这将是一个重新安排元素的问题，使它们成为顶部和底部，而不是父级和子级

这是你的案例修正。您必须将背景红色放入容器元素的子元素中。。。还有上面的进度条。既然容器没有任何背景色，就不会因为抗锯齿而出血

此外，如果对“背景”分区应用相同的

边界半径

。。。还有一个1像素的白色边框。。。魔法被创造出来了

下面，我以一定的间隔设置了

进度条的
宽度
，以模拟基于状态的动画


//模拟动画。。。就为了这个演示。
let outer=document.querySelector（“.outer”）
让进度=document.querySelector（“.progress bar”）
设outerWidth=outer.getBoundingClientRect（）.width
让progressWidth=progress.getBoundingClientRect（）.width
let interval=setInterval（函数（）{
progressWidth=progress.getBoundingClientRect（）.width
progress.style.width=progressWidth+10+“px”
如果（progressWidth>outerWidth）clearInterval（间隔）
}，500）
.outer{
背景色：透明；
宽度：500px；
高度：50px；
位置：相对位置；
边界半径：5雷姆；
溢出：隐藏；
}
.进展背景{
背景：红色；
宽度：calc（100%-2px）；/*用于补偿白色边框空间*/
高度：计算（100%-2px）；/*以补偿白色边框空间*/
位置：绝对位置；
边界半径：5rem；/*与容器半径相同*/
边框：1px纯白；/*白色边框*/
}
.进度条{
背景：白色；
宽度：0；
身高：100%；
位置：绝对位置；
过渡：宽度为1s；/*只是为了让动画更流畅一点*/
}

我无法100%确定您想要达到的目标，您能否添加一张所需结果的图像以使其更清晰？@koder613 OP正在制作一个进度条，使用内部div作为进度指示器。如您所见，如果运行代码，由于边界半径的原因，
outer
div的背景色可以在左侧和右侧看到。OP希望
内部
分区覆盖该区域，或者背景色不“出血”。我应该在回到PC时添加-但我希望它按照内部分区完全为白色。这是否回答了您的问题@Louyspatricebesette我编辑了我的问题，以更清楚地显示我的用例，这个答案可能不适用。肯定会模糊效果，但如果你将绿色改为白色，你可以看到出血仍然发生。Doh！你是对的！！我终于找到了真正的解决办法。。。。它是关于背景div的白色边框…；）啊，好吧，谢谢你抽出时间。令人沮丧的是，由于反走样，它无法按预期工作。是的，我同意！至少5年以上！英雄联盟