之前寫css圓形時總是直接設置border-radius為50%。后來看某css動畫網站時發現作者都是用的100%。遂去了解了一下2者的差別。
border-radius的值是百分比的話，就相當於盒子的寬度和高度的百分比。我們知道在一個正方形內做一個面積最大的圓形，這個圓的半徑就為正方形邊長的一半。所以border-radius為50%時，則會形成圓。那么可能有人就會問，border-radius為100%時，對應圓的半徑長度不就是正方形的寬高么，這種情況下，為什么還是會形成一個和值為50%一樣的圓形呢。
其實這是W3C對於重合曲線有這樣的規范：如果兩個相鄰角的半徑和超過了對應的盒子的邊的長度，那么瀏覽器要重新計算保證它們不會重合。下面我們假定一個寬高為100px的正方形A。此時設置border-top-left-radius=100%；則正方形A會變成一個半徑為100px的四分之一圓弧。 
然后我們再給border-top-right-radius=100%。此時相鄰的角的半徑已經超過了對應的盒子的邊的長度。瀏覽器需要重新計算。重新計算的規則是同時縮放兩個圓角的半徑知道他們剛好符合這個方形。 
也就是說如果相鄰圓角的半徑都被設置成了大於50%，那瀏覽器會根據圖形的實際情況做一些計算。保證圓角能夠剛好適應圖形。
建議使用border-radius = 50% 來避免瀏覽器不必要的計算。值得注意的是在涉及到與圓角相關動畫的情況下，值為50%和100%，在動畫效果上會有不同。例子