本文同步自 JSCON簡時空 - 技術部落格，點選閱讀

視訊講解

視訊地址

文字講解

1、先講結論

border-radius 這個 css 屬性大家應該使用得非常嫻熟，現實中用到的場景基本都是四個圓角一致的情況。

比如實現一個圓形按鈕，其中 border-radius 數值有些人寫為 50%，有些人則寫成 100%，不過你會發現兩者效果是一樣的：

測試 HTML 程式碼如下：

<style>
  .circle-btn {
    color: white;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
  }
</style>

<div class="circle-btn" style="
    background: #8BC34A;
    border-radius: 100%;
">50%</div>

<div class="circle-btn" style="
    background: #E91E63;
    border-radius: 100%;
">100%</div>
 

其實不論是 50% 還是 100%，只要將 border-radius 設定成 x%，且 x >= 50 都能獲得和 50% 一樣的效果。

如果不知道其中的原因，可以繼續往下看。

2、原因分析

第 1 個知識點是 border-radius 的寫法，最全的寫法是這樣的，記住這張圖就行：

詳細教程可參考《CSS Border-Radius Can Do That?》

第 2 個知識點是 border-radius 的標準，在border-radius 標準中 Overlapping Curves 章節裡，有這麼一段話：

簡單翻譯為：角曲線不得重疊：當任意兩個相鄰邊框半徑的總和超過邊框的長度時，UA（標準實現方）必須按比例減少所有邊框半徑的使用值，直到它們沒有重疊

我們知道兩個前提：

• 每一條邊最高可用長度也就 100%；
• 每一條邊最多可以設定兩個圓角曲線（在邊的兩端）

這兩端的橢圓半軸長度設定值之和存在兩者情況：

• 設定值加起來不超過 100%，那麼大夥兒各自安好，互不干擾；
• 設定值加起來如果超過 100%，那需要按比例重新劃分：比如一個設定 100%，一個設定成 300%，加起來就 400% 了（超過 100% 了） —— 那麼實際上一個真正分得長度的 1/4，另一個真正分得長度的 3/4；

結合 知識點 1 和 知識點 2 就能得到文章最開始的結論了。

3、小工具 + 小練習

如果對 border-radius 的寫法不太熟也沒關係，有個線上工具可以幫你更好的理解。

另外，最近看到使用單個 div + border-radius

具體實現可參考以下任意一篇文章：

• How to create a yin-yang symbol with pure CSS：使用一個 div 元素純 CSS 實現 “陰陽” 圓形，附 原始碼
• 利用CSS3的border-radius繪製太極及愛心圖案示例：使用 border-radius 繪製太極和愛心
• CSS畫各種圖形（五角星、吃豆人、太極圖等）：更多練手的 css 專案

也可以參考我所 “抄寫” 的程式碼

4、參考文章

• MDN border-radius: MDN 文件
• Spec border-radius: CSS3 中 border-radius 的規範
• CSS Border-Radius Can Do That?：強烈推薦這篇文章（附中文譯文），圖文並茂，還帶一個視覺化工具
• Fancy-Border-Radius：這個就是上一條所指的線上 border radius 工具，所見即所得的；邊動手邊學習，理解會快很多
• 秋月何時了，CSS3 border-radius知多少？：張鑫旭教程，行文幽默，講解清晰詳細
• 瞭解 border-radius 的原理：用例子講解 border-radius 的原理
• CSS border-radius:50%和100%的區別：本文主要是討論 50% 和 100% 的設定值一樣的原因
• border-radius：專門生成 border-radius CSS3 程式碼的網站，也是所見即所得

關於 “前端Tips專欄”

“前端Tips”專欄，隸屬於 JSCON 專欄系列，設計初衷是快速獲取前端小技巧知識，取材廣泛，涵蓋前端程式設計諸多領域。設計初衷是快速消費類知識，所以每個 tips 閱讀耗時大約 5 分鐘。為方便讀者在不同場合閱讀，每篇 tips 配有視訊、音訊和文字，挑自己喜歡方便的就行。

有兩種方式獲取歷史 tips：

① 在公眾號內回 "tips" +"期號" 就可以。例如：回覆 “tips25” 即可獲取第25期 tips

② 前往網站：https://boycgit.github.io/fe-program-tips ，裡面提供了搜尋功能

歡迎大家關注我的知識專欄，更多內容等你來挖掘

「可在微信內搜尋 “JSCON簡時空”或 “iJSCON” 關注