有趣的border-radius

摘要： 今天我們只關注上面的第二個點，也就是border-radius的八個值 首先來看一下效果（多圖預警）： 來幾個酷炫的按鈕（大圖預警）： ...

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

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

Line"/>

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

這四個按鈕不僅用了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。
這裡實現的是等腰梯形。若想實現非等腰梯形，可以讓左右邊框的寬度不相等。
*/
複製程式碼

題外話

這是我在掘金上的第一篇部落格，也釋出在了 ofollow,noindex">GitHub 上。可能有很多不當之處，歡迎大家批評指教。我昨晚在研究 border-radius 和寫這篇部落格時參考了部分其他人的部落格，但是他們的部落格都不是原文出處，應該是轉發他人的，而且還沒有附上原文出處連結。所以我在這裡就不附上這些連結了。

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

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