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

Question

我有一个包含以下 CSS 的框：

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

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

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

是否有任何解决方法。就像在不使用background-color. 重要的是，我无法从填充切换到边距并消除对backgroud-clip属性的需求。

score 0 · Accepted Answer

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

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

完美运行。

score 0 · Accepted Answer

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

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

HTML：

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

        </div>
</div>

CSS：

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

2 回答 2