html - 背景剪辑与边界半径混淆

Question

我有一个包含以下 CSS 的盒子:

.box{
    background-clip: content-box;
    background-color: #FFEA27;
    border-radius: 4%;
} 

问题是，由于 background-clip: content-box;，边界半径没有被正确计算，因为 border-radius 也计算填充。最后我得到这样的结果:https://prnt.sc/n9gxpv

我们以右上角为例。从右线到边缘和从顶线到边缘的舍入不相等，因此我们没有得到完美的圆边。

有什么解决办法吗？就像不使用 background-color 设置 div 的背景颜色一样。重要的是我不能从填充切换到边距并消除对 backgroud-clip 属性的需要。

Answer 1

我做了这个简单的解决方法来修复它:

我在当前框内制作了另一个 div，并将其宽度和高度设置为 100%(因此它采用原始元素的宽度和高度)。比我只是将背景颜色和边框半径设置为内部元素。这是代码示例。

HTML:

<div class="box">
        <div class="innerBox">

        </div>
</div>

CSS:

.innerBox{
    width: 100%;
    height: 100%;
    border-radius: 2%;
    background-color: #1C1C1C;
}