一行代码值200万？充满哲学与禅意的border-radius

引子

小米春季发布会，意外的让小米的 logo 和前端产生了碰撞，并成为大家讨论的热门话题。

我们先来看看媒体对新 logo 的描述：

“小米新 LOGO 的设计理念为 “Alive”，即生命感设计…

Alive理念是小米对智能互联时代转折点的思考与回应，它将东方哲学的思考融入了品牌视觉当中，从更高的维度重新思考科技与人的关系——人是活的，科技也应该是活的”。

经过设计师的一番解答，这个看起来没什么新奇的 logo 立刻充满了浓浓的哲学味道。但是这个价值 200 万的设计在程序员手中只是一行代码：

border-radius: 19px;

那我们不禁要问了，border-radius 何方神器，竟有如此魔力？今天就带领大家领略一下这个 css 神器的魅力。

参悟

大到宇宙星辰，小到你明亮清澈的双眼，这个世间一切美好都和圆脱不了干系。

在网页设计中，一个直角矩形往往会显得呆板生硬，一旦加上了圆角，就会给人柔顺、舒服的感受，于是border-radius应运而生。

MDN中这样定义border-radius：

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

下面我们创建一个 div ，然后慢慢探索。

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {background: linear-gradient(45deg, #3023AE 0%, #f09 100%);width:295px;height:295px;
}</style>
</head>
<body>
<div id="example1">
</div>
</body>
</html>

显示效果如下图。

道生一

在一切平面图形中，最美的是圆形——毕达哥拉斯

border-radius 支持传入多个参数，先看一个参数的例子。

#example1 {border-radius: 30%;background:linear-gradient(45deg, #3023AE 0%, #f09 100%);;width:295px;height:295px;
}

我们设置了一个 30%，代表每一个角都会变成半径为 a 的圆弧，a 的长就是整个边长的 30%。这里除了百分比，我们也可以使用 px、rem 或者 em。
聪明的你，一定想到了，我们要画出毕达哥拉斯心中的最美好的图形，有多简单了。

#example1 {border-radius: 50%;background: linear-gradient(45deg, #3023AE 0%, #f09 100%);width:295px;height:295px;
}

做一个圆形的照片裁剪，也很简单了。

#example1 {border-radius: 50%;background:url(https://upload-images.jianshu.io/upload_images/2634264-695a622cede71b90.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240);background-size:100% 100%;width:295px;height:295px;
}

一个简单的变换，洞见世间之美。

一生四，四生八

上善若水，任方圆 ----- 《道德经》

当我们使用超过一个参数的时候，就是开始为每一个不同的角设置参数了。值的匹配方向从左上开始按顺时针方向匹配。

#example1 {border-radius: 30% 70% 20% 40%;background: linear-gradient(45deg, #3023AE 0%, #f09 100%);width:295px;height:295px;
}

四个角的控制，已经能够产生一些奇妙的效果了，更牛的是，我们实际上可以有8个控制参数，是时候将道家思想和太极八卦融汇贯通了。

按照 W3C 说法：

“If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally.”

在参数中加入斜杠，就能分别控制水平和竖直方向的半径了。

下面我们来对比一下 border-radius: 4em 8em; 和 border-radius: 4em/8em; 的区别。

一图胜千言，上图已经很明了了，就不再过多解释了。下面我们动用8个参数，创造一个生命的本来样貌：细胞。

#example1 {border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;background: linear-gradient(45deg, #3023AE 0%, #f09 100%);width:295px;height:295px;
}

实际上这个细胞是四个椭圆重叠的结果：

幻化

金鳞岂是池中物，一遇风云便化龙----------《说岳全传》

通过上面的讲解，我相信你已经参悟了 border-radius 的本质了，我们将其和其他武器结合起来，就能幻化出令人惊艳的效果。

复归于婴儿

比如这些可爱的“棒棒糖 button”，充满了童趣与天真,见指南。
加粗样式

变化万千

很多图形我们都借助于图片或者 SVG 来实现，缺点就是资源加载。

通过 CSS 来实现 Shape 是一件“高科技”的事情，The Shapes of CSS | CSS-Tricks 为我们提供了实现一些常见 shape 的 demo，我们来看几个和 border-radius 相关性比较大的例子。

position: relative;width: 0;height: 0;border-top: 9px solid transparent;border-right: 9px solid red;transform: rotate(10deg);
}
#example1:after {content: "";position: absolute;border: 0 solid transparent;border-top: 3px solid red;border-radius: 20px 0 0 0;top: -12px;left: -9px;width: 12px;height: 12px;transform: rotate(45deg);}

这个例子通过组合元素和: after 内容，创建了一个长尾箭头，尾部是通过 border-top 结合 border-radius 创建出来的。

网传大数学家笛卡尔的爱情绝唱是一封只写了心形线的函数的信，不管故事真假，心形与爱情的关联却是由来已久，借助 border-radius 我们也能画一颗浪漫的心。

    #heart {position: relative;width: 100px;height: 90px;}#heart:before,#heart:after {position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 80px;background: red;border-radius: 50px 50px 0 0;transform: rotate(-45deg);transform-origin: 0 100%;}#heart:after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;}

这个例子通过组合旋转过的左右两个图形来拼合一个心形。

下面我们再来看一个代表无穷无尽的无穷符号。

   #infinity {position: relative;width: 212px;height: 100px;box-sizing: content-box;}#infinity:before,#infinity:after {content: "";box-sizing: content-box;position: absolute;top: 0;left: 0;width: 60px;height: 60px;border: 20px solid red;border-radius: 50px 50px 0 50px;transform: rotate(-45deg);}#infinity:after {left: auto;right: 0;border-radius: 50px 50px 50px 0;transform: rotate(45deg);}

与心形的实现方法类似，这个图形采用旋转和拼装的策略。

这里面还有更多的可能性，现在就可以动手去探索了。

动静相随，阴阳相合

《太极图说》中说：“动而无静，静而无动，物也”。静为方，方动成圆。

我们让图形的变换运动起来，其实也很简单，就是使用动画。

先创建基本元素。

<div class="container"><div class="box"><div class="spin-container"><div class="shape"><div class="bd"></div></div></div></div>
</div>

配置样式。

{box-sizing: border-box;}body {background: #003;}
.container {height: 100vh;display: flex;align-items: center;justify-content: center;overflow: hidden;
}
.box {width: 60vmin;height: 60vmin;border: 1px dashed rgba(255,255,255,0.4);position: relative;
&::before {content: "";position: absolute;top: 0;left: 0;bottom: 0;right: 0;border-radius: 50%;border: 1px dashed rgba(255,255,255,0.4);transform: scale(1.42);}
}
.spin-container {width: 100%;height: 100%;animation: spin 12s linear infinite;position: relative;
}
.shape {width: 100%;height: 100%;transition: border-radius 1s ease-out;border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;animation: morph 8s ease-in-out infinite both alternate;position: absolute;overflow: hidden;z-index: 5;
}
.bd {width: 142%;height: 142%;position: absolute;left: -21%;top: -21%;background: url(https://upload-images.jianshu.io/upload_images/2634264-39b2b46749eaa896.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240);background-size: 100%;background-position: center center;display: flex;color: #003;font-size: 5vw;font-weight: bold;align-items: center;justify-content: center;text-align: center;text-transform: uppercase;animation: spin 12s linear infinite reverse;opacity: 1;z-index: 2;
}
@keyframes morph {0% {border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;} 100% {border-radius: 40% 60%;}
}
@keyframes spin {to {transform: rotate(1turn);}
}

上面的例子中，我们通过 keyframes 定义了 border-radius 和 rotate 的变换动画，这样就会产生下面这样的效果。

后记

再回到小米的 logo，其实没那么简单，设计并不是一行代码所能概括的。下图这个公式是设计师在寻找方圆之间最美比例的时候所使用的。

将各种变量 n 带入这个数学公式的话，从正圆形到正方形之间，将会呈现出各种美丽的形状。

经过各种对比，最终采用 n=3 这一形状。border-radius:19px 其实是不准确的。

玄之又玄，众妙之门，你懂了吗？

HaloTech瑶光栈，技术不应该是一个人的洞见，而是一群人的思辨
关注我们，不迷路