背景剪輯混亂邊界半徑

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

完美的工作。