背景剪辑混乱边界半径

Question

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

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

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

我们来看看右上角的例子。 从右线到边缘以及从顶线到边缘的圆角不相等，因此我们没有得到完美的圆边。

有没有解决方法呢？ 就像设置div的背景颜色而不使用background-color 。 重要的是，我无法切换到填充边距并消除对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;
}

Answer 2

而不是使用％作为单位，使用像素。

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

完美的工作。