有趣的border-radius

MDN上關於border-radius的介紹

• one,two,three,or four <length> or <percentage> values. This is used to set a single radius for the coners.
• followed optionally by "/" and one, two, three, or four <length> or <percentage> values. This is used to set an additional radius, so you can have elliptical corners.

貼心附上連接，請點擊這裏

深度挖掘border-radius

今天咱們只關注上面的第二個點，也就是border-radius的八個值

首先來看一下效果（多圖預警）：

來幾個酷炫的按鈕（大圖預警）：

這四個按鈕不只用了border-radius還用了box-shadow和linear-gradient

簡單回顧一下border-radius的八個值

/* 除了長度單位還能夠用%表示 */
border-radius: 10px/20px;
border-radius: 10px 20px/20px 10px;
border-radius: 10px 20px 30px/30px 20px 10px;
border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;
複製代碼

實現的原理

如下圖爲例

代碼以下

border-radius: 100px/50px;
複製代碼

你們應該都清楚，上面的代碼也是簡寫形式，完整形式應該以下：

border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;
複製代碼

咱們簡單分析一下上面的代碼。「/」的左邊表示的實際上是左上，右上，右下，左下四個角水平方向的半徑，而「/」右邊表示的左上，右上，右下，左下四個角垂直方向的半徑。

因爲四個角是相似的，咱們以左上角爲例，做用原理圖以下（圖有點醜，沒辦法，審美有問題，怎麼繪製怎麼改顏色都不能變好看......）：

咱們用一個水平半徑爲100px（左上角橢圓中的黃線），垂直半徑爲50px（左上角橢圓中的紅線）的橢圓緊貼左上角（橢圓的上部緊貼矩形的上部，橢圓的右部緊貼矩形的右部）。左上角矩形多餘的區域就會被裁剪掉。這是裁剪一個角，若是裁剪四個角就會變成上上圖的樣子。

簡單練習

• 這是啥圖形之我也不知道叫啥

  

代碼以下：

border-radius: 100% 50%/0 100%;
複製代碼

• 一片葉子

代碼以下：

border-radius: 0 100%/0 100%;
複製代碼

• 傾斜的橢圓

代碼以下：

border-radius: 100% 50%/100% 50%;
複製代碼

• 扭曲的相框

代碼以下：

border-radius: 150px 400px 150px 400px/400px 150px 400px 150px;
複製代碼

酷炫按鈕練習

代碼以下（包含漸變和陰影）：

background: linear-gradient(to bottom,#FBBCD0,#FBAAC3);
box-shadow: 0 10px 10px #B9174C;
border-radius: 150px 14px/150px 14px;
複製代碼

代碼以下（包含漸變和陰影）：

background: linear-gradient(to bottom,#E8F6D9,#BEE595);
box-shadow: 0 10px 10px #4F821D;
border-radius: 50px/100px;
複製代碼

代碼以下（包含漸變和陰影）：

background: linear-gradient(to bottom,#D7EAFD,#A3C7E8);
box-shadow: 0 10px 10px #4179AB;
border-radius: 50px 50px 20px 20px/200px 200px 20px 20px;
複製代碼

代碼以下（包含漸變和陰影）：

background: linear-gradient(to bottom,#FDE0AF,#E4B260);
border-radius: 15px 15px 50% 50%/15px 15px 100% 100%;
box-shadow: 0 10px 10px #986206;
複製代碼

總結

其實你只要看懂了上面的原理圖，關於border-radius就能夠算是理解了。剩下的就是發揮你的創造力去製做出不一樣效果的圖形，能夠結合漸變和陰影製做出很漂亮的圖形。

額外收穫

在研究border-radius的時候居然收穫到了如何用 DIV 來模擬梯形，學習到處有驚喜！

這裏只附上代碼，對DIV模擬梯形感興趣而且不清楚怎麼實現的朋友能夠參考一下，若您都會，請跳過

height: 0;
width: 400px;
border-bottom: 200px solid lightgreen;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
/* 
    實現梯形實際是至關於在實現三角形的基礎上(width=0)更改width。
    這裏實現的是等腰梯形。若想實現非等腰梯形，可讓左右邊框的寬度不相等。
*/
複製代碼

題外話

這是我在掘金上的第一篇博客，也發佈在了GitHub上。可能有不少不當之處，歡迎你們批評指教。我昨晚在研究 border-radius 和寫這篇博客時參考了部分其餘人的博客，可是他們的博客都不是原文出處，應該是轉發他人的，並且尚未附上原文出處連接。因此我在這裏就不附上這些連接了。

雖然參考了他人的文章，但這篇博文的確是我一字一字手打的，沒有任何粘貼複製。並且上面的原理圖之類的都是我本身從新繪製的，保證原圖出處在這。練習中酷酷的按鈕都是我在網絡上找的按鈕圖而後本身用圓角、陰影、漸變一點一點製做出來的。

歡迎轉發。碼字不易，轉發時請自覺附上原文連接，謝謝合做。