border-radius:50%和100%的區別

　　發現border-radius:50%和border-radius:100%的效果是相同的，有點困惑，因而去上網查詢了一下二者的差異。

　　border-radius的值若是爲百分比，則爲盒子的寬度與高度的比值。因此當值爲50%的時候正好是直徑爲盒子長度的圓。那當border-radius爲100%的時候，直徑應該爲兩倍的邊長，那爲何最終效果是和50%的時候的長度是同樣的呢？

　　其實在W3C中，若是兩個相鄰角的半徑之和超過了相應盒子邊的長度，那麼瀏覽器要從新計算，以保證二者不會重合。

　　假設有一個100px的盒子，若border-top-left-radius:100%;則盒子會變成一個半徑爲100px的1/4圓。（以下圖左）

　　這個時候，若是咱們再給一個border-top-right-radius:100%;此時相鄰的兩個角的半徑之和已經超過了盒子的長度，瀏覽器須要從新計算。計算的規則就是同時縮放兩個圓角的半徑，直至兩個相鄰角的半徑和爲盒子的長度。也就是說，當兩個圓角的半徑爲50%的時候，圓角正好符合W3C標準。（下圖右）