在CSS中設置border-radius屬性時，我遇到了一個特殊的視覺差異。在CSS battle first challenge target # 8中，我有一個固定寬度為140px的元素。邊框左下半徑設置為50%，而邊框右下半徑設置為70px。從邏輯上講，在這種情況下，50%應該等于70px，因為元素的寬度是已知的。然而，當渲染時，兩個角半徑之間有一個小的區別，我想知道為什么會發生這種情況。 這是您可以放入的代碼:& quothttps://cssbattle.dev/play/8 & quot；打開“差異”來檢查差異。

<div a></div>
    <style>
      div {
        position:fixed;
        left:130px;
        width: 140px;
        border-bottom-left-radius:50%;
        border-bottom-right-radius:70px;
        height: 150px;
        background: #dd6b4d;
       }
      div[a]{
        top:100px;  
      }

我已經嘗試詢問ChatGPT，它建議這個問題可能是由于瀏覽器渲染。但是，我在Chrome和Bing瀏覽器上都測試過，遇到了同樣的問題。

從邏輯上講，在這種情況下，50%應該等于70px，因為元素的寬度是已知的。

你的錯誤在于假設這僅僅取決于寬度，但事實并非如此。

使用border-bottom-left-radius(以及其他選項)，您實際上指定了兩個半徑，一個用于橢圓的長半軸，一個用于短半軸。

https://developer . Mozilla . org/en-US/docs/Web/CSS/border-top-left-radius #值:

水平軸的百分比指的是方框的寬度，垂直軸的百分比指的是方框的高度。

您在這里只指定了一個值，50%，因此您在一個軸方向上設置了寬度的50%的邊框半徑，在另一個軸方向上設置了高度的50%。

你的元素寬140像素，高150像素。和140的50%是不同于150的50%的值。

當然，這里你會得到一條不同的曲線，和70px的曲線相比，你為兩個軸設置了相同的半徑。