[css] border-radius:50%和border-radius:100%有什么區別？

這個實際上可以仔細區分一下，樓上的兩個圖具體來說應該是 border-top-left-radius 的50%和100%的區別，假如我們直接設置border-radius: 100%; 或者為50%我們會發現這兩個圖實際上沒有區別（長方形也一樣），所以我們需要了解一下border-radius值真正的含義， 它的值如果是百分比的話，就相當于盒子的寬度和高度的百分比，所以border-radius為50%時，對應的是邊長的一半，所以正方形會顯示圓形，當我們再增加至100%這個過程中他的顯示結果都不會改變，這是因為W3c有對于’曲線重合‘這樣的規范，當兩個鄰角的 半徑和超出了總邊長，瀏覽器會重新計算保證不會重合，所以建議使用border-radius:50%來避免瀏覽器進行不必要的計算

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[css] border-radius:50%和border-radius:100%有什么区别？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。