淺談爲什麼border-radius設置成50%~100%都能畫圓

CSS繪製一個圓,我們很容易想到把border-radius設置成50%,但是,事實上,把border-radius設置成50%~100%都能畫圓。

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

如果border-radius設置成爲80%,則兩個相鄰圓角合起來將是160%;如果border-radius設置成爲100%,則兩個相鄰圓角合起來將是200%。

這兩種情況都超過了對應的盒子的邊的長度,瀏覽器會重新計算保證它們不會重合,同時縮放兩個相鄰圓角的半徑直到它們可以剛好符合盒子,因此兩個相鄰圓角的半徑就會變成50%。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章