前端Tips#3 - 簡寫的 border-radius 100% 和 50% 是等效的

本文同步自 JSCON簡時空 - 技術博客，點擊閱讀

視頻講解

【 視頻地址 】

文字講解

一、先講結論

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% 同樣的效果。

若是不知道其中的緣由，能夠繼續往下看。

二、緣由分析

第 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 就能獲得文章最開始的結論了。

三、小工具 + 小練習

若是對 border-radius 的寫法不太熟也不要緊，有個在線工具能夠幫你更好的理解。

另外，最近看到使用單個 div + border-radius 實現如下 「轉動的太極圖」，大夥兒能夠練習一下：

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

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

也能夠參考我所 「抄寫」 的代碼

四、參考文章

• 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-... ，裏面提供了搜索功能

歡迎你們關注個人知識專欄，更多內容等你來挖掘