背景剪辑混乱与边界半径

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

Answer 2

使用像素代替单位％。

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

完美运行。