小豬喬治和border-radius

概述

以前看了一篇關於用CSS來畫小豬佩奇的文章，抱着鍛鍊本身的心態造了個輪子，畫了個佩奇的小弟喬治，效果能夠看這裏，源碼在這裏。

開發過程當中也讓我對border-radius這個屬性有了更深入的理解。

border-radius

之前我在使用這個屬性時，只知道這個是表示圓角，經常使用border-radius: 5px實現圓角長方形或者border-radius: 50%來畫圓形。在開發小豬的過程當中，會須要使用許多不太規則的形狀，所以須要瞭解該屬性更深刻的原理，才能知足個人開發需求。

徹底體

該屬性的徹底體以下：

border-radius: x1 x2 x3 x4 / y1 y2 y3 y4;

即任何值均可以轉爲該種形式。例如，border-radius: 50%等價於border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%。name這8個值分別表明什麼含義呢？

矩形的四個圓角咱們能夠分別進行控制，例如矩形的左上圓角由x1和y1來控制，將一個水平半徑爲x1，垂直半徑爲y1的橢圓與矩形左上角相切，相切的兩個點之間的圓弧就是最終的圓角曲線。以下圖所示。

同理，x2和y2控制右上角，x3和y3控制右下角，x4和y4控制左上角。控制的方式與左上角的相似。

小Tips

1. 若是對應的x和y值相等，則能夠省略成border-radius: x1 x2 x3 x4的形式；若是這些x也都相等，則能夠省略成border-radius: x1的形式。
2. 當值使用百分比時，x取值是參照矩形的寬度，y是參照矩形的高度。好比寬200px，高100px的矩形，若是設置border-radius: 10% 10% 10% 10% / 10% 10% 10% 10%，轉換成像素等價於border-radius: 20px 20px 20px 20px / 10px 10px 10px 10px。
3. 當設置border-radius: 100%時，發現其表現與border-radius: 50%相同。這是由於若是水平方向的兩個半徑和（x1+x2或者x3+x4）大於寬度，或者垂直方向的兩個半徑和(y1+y3或y2+y4)大於高度時，瀏覽器會對它們進行等比例縮小，知道再也不超出爲止。

開始繪圖

在瞭解了border-radius的原理後，就能夠開始繪製了。

主要有如下幾個步驟：

1. 找一張小豬喬治的圖片參考
2. 對圖片中的部分進行分解，並逐一實現（廢話）

其實掌握了border-radius後，這些步驟都不難了，細心繪製就能夠完成啦。

我繪製的小豬喬治如圖

參考資料

• 用CSS畫小豬佩奇，你就是下一個社會人！