在學(xué)習(xí)css的過程中，我們一般想要得到一個圓的話，那么border-radius這個屬性的必不可少的，有時候我們把這個值設(shè)置成了50%，OK正常，有時候又設(shè)置成100%，也能work well ，那這兩個之間的區(qū)別到底是什么呢

這是一個 150px x 150px 大小的方形，將它的四個角的半徑都設(shè)置成 50%。根據(jù) W3Cborder-radius 的規(guī)范定義，如果border-radius的值是百分比的話，就是相對于 border box 的寬度和高度的百分比。在我們的例子中，盒子的寬高都是 150px，所以 50% 對應(yīng)的就是 75px。

border-radius 的工作原理

但是有時候我看到有的人會用border-radius: 100%;實現(xiàn)圓形的效果，在前段時間的一個項目中我想都沒想就這么使用了，看起來和 50% 并沒有什么區(qū)別。是什么原因呢？

在 Lea Verou 的演講The Humble Border Radius中，她說到 W3C 對于重合曲線有這樣的規(guī)范：如果兩個相鄰的角的半徑和超過了對應(yīng)的盒子的邊的長度，那么瀏覽器要重新計算保證它們不會重合。

如果左上角的圓角半徑被設(shè)置成了100%，那么圓角就會從這個方形左下角跨到右上角，相當(dāng)于把圓角半徑設(shè)置成為150px（也就是方形的大?。?。如果同時把右上角的圓角半徑也設(shè)置成為100%，則兩個相鄰圓角合起來就有200%。這種情況自然是不允許出現(xiàn)的，所以瀏覽器就會重新就算，勻出空間給右邊的圓角，同時縮放兩個圓角的半徑直到它們可以剛好符合這個方形，所以半徑就變成了50%。

同樣的，瀏覽器會對其他的圓角應(yīng)用相同的計算，計算的結(jié)果是每個圓角的半徑變成了50%，所以我們看到了一個原型。即使將border-radius設(shè)置為150px，瀏覽器還是會按照75px畫圓角，75px是瀏覽器所允許的這個方形能夠擁有的最大的圓角半徑。

結(jié)論

如果所有圓角的半徑都被設(shè)置成了100%，瀏覽器會根據(jù)圖形的實際情況做一些計算，保證圓角能夠剛好適應(yīng)圖形。不過我不確定將所有圖形的border-radius設(shè)置成100%對性能會不會有影響。