border-radius 50% 和100%

根據 W3C border-radius 的規範定義，若是 border-radius 的值是百分比的話，就是相對於 border box 的寬度和高度的百分比。

W3C 對於重合曲線有這樣的規範：若是兩個相鄰的角的半徑和超過了對應的盒子的邊的長度，那麼瀏覽器要從新計算保證它們不會重合。

因此說，若是四個角都設置爲50%或者以上，因爲空間不足，因此空間會被平均分配，各角都同樣，結果表現都爲圓形。

 

若是是border-radius: 50% 100% 這樣呢？

首先看下border-radius每一個值的定義，每一個半徑的四個值的順序是：左上角，右上角，右下角，左下角。若是省略左下角，右上角是相同的。若是省略右下角，左上角是相同的。

因此只有兩個值的話，左上角等於右下角，左下角等於右上角

這個時候，仍然應該是等比分配的，左上角和右下角 的圓弧弧度應該是 左下角和右上角 的一半，表現以下：