今天寫(xiě)代碼得時(shí)候，突然想到一個(gè)問(wèn)題， Border-radius50%和100%有什么不一樣， 在測(cè)試之下，得出，50%和100%都是圓形， 并沒(méi)有什么影響， 那么兩者有區(qū)別嘛？把我得出得結(jié)論總結(jié)給大家。
用 CSS 畫(huà)一個(gè)完美的圓
在 Web 上我們常常會(huì)看到很多用到圓形的地方，比如帶背景色的或者圖片是圓形的。
CSS的圓RDIO，Dribbble和Codecademy網(wǎng)站
通常我們都是用 CSS 的 **border-radius **屬性實(shí)現(xiàn)圓形：先畫(huà)一個(gè)方形，然后將它的 border-radius 設(shè)置成50%。但是為什么偏偏是50%呢？我從來(lái)沒(méi)有思考過(guò)這個(gè)問(wèn)題，只是單純地認(rèn)為把頂角的半徑設(shè)置成方形的高度或者寬度的一半就可以得到一個(gè)圓形。
這是一個(gè) 150px x 150px 大小的方形，將它的四個(gè)角的半徑都設(shè)置成 50%。根據(jù) W3C border-radius 的規(guī)范**定義，如果 **border-radius **的值是百分比的話，就是相對(duì)于 border box 的寬度和高度的百分比。在我們的例子中，盒子的寬高都是 150px，所以 50% 對(duì)應(yīng)的就是 75px。
border-radius 的工作原理
但是有時(shí)候我看到有的人會(huì)用 **border-radius: 100%; **實(shí)現(xiàn)圓形的效果，在前段時(shí)間的一個(gè)項(xiàng)目中我想都沒(méi)想就這么使用了，看起來(lái)和 50% 并沒(méi)有什么區(qū)別。是什么原因呢？
在 Lea Verou 的演講 The Humble Border Radius** 中，她說(shuō)到 W3C 對(duì)于重合曲線**有這樣的規(guī)范：如果兩個(gè)相鄰的角的半徑和超過(guò)了對(duì)應(yīng)的盒子的邊的長(zhǎng)度，那么瀏覽器要重新計(jì)算保證它們不會(huì)重合。
如果左上角的圓角半徑被設(shè)置成了100%，那么圓角就會(huì)從這個(gè)方形左下角跨到右上角，相當(dāng)于把圓角半徑設(shè)置成為150px（也就是方形的大?。Ｈ绻瑫r(shí)把右上角的圓角半徑也設(shè)置成為100%，則兩個(gè)相鄰圓角合起來(lái)就有200%。這種情況自然是不允許出現(xiàn)的，所以瀏覽器就會(huì)重新就算，勻出空間給右邊的圓角，同時(shí)縮放兩個(gè)圓角的半徑直到它們可以剛好符合這個(gè)方形，所以半徑就變成了50%。
結(jié)論
如果所有圓角的半徑都被設(shè)置成了100%，瀏覽器會(huì)根據(jù)圖形的實(shí)際情況做一些計(jì)算，保證圓角能夠剛好適應(yīng)圖形。不過(guò)我不確定將所有圖形的 border-radius 設(shè)置成100%對(duì)性能會(huì)不會(huì)有影響。
