有趣的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 和写这篇博客时参考了部分其余人的博客，可是他们的博客都不是原文出处，应该是转发他人的，并且尚未附上原文出处连接。因此我在这里就不附上这些连接了。

虽然参考了他人的文章，但这篇博文的确是我一字一字手打的，没有任何粘贴复制。并且上面的原理图之类的都是我本身从新绘制的，保证原图出处在这。练习中酷酷的按钮都是我在网络上找的按钮图而后本身用圆角、阴影、渐变一点一点制做出来的。

欢迎转发。码字不易，转发时请自觉附上原文连接，谢谢合做。