转载

秋月何时了，CSS3 border-radius知多少？

一、秋月何时了

这两个月产出有点少，为什么呢？大家都学过「产出守恒定律」，文章产少了，是因为产了其他很屌的东西：

早就知道女朋友是技术学习的第一阻碍力，现在发现小朋友才是技术学习的Boss级阻碍力。

对了，今天是万圣节，我有必要扮鬼让大家开心一下：

告诉大家一个秘密，我每天早上就是这么帅醒的。

不过在我们国家，万圣节显得冷冷清清凄凄惨惨戚戚，但是，第11区的人民就热闹多了：

不知道大家的万圣节是怎么过的，尤其今年恰逢周末。想想我年轻的时候，这样的节日不是加班，就是宅在家里。如果你也是这样，别桑心，没人给你扮鬼，咱们可以自己扮鬼开心下嘛。比如说：单身鬼，穷鬼等等。哟，你突然发现自己……根本就不用扮，直接本色出演就可以了！那……真是太恭喜你了，原来你每天都在过万圣节！秋月何时了，CSS3 border-radius知多少？那更应该开心啦！

今天10月末，过了今天，秋天也算是走到头了，但是，对于前端的学习，路还漫长，今天就说说CSS3 border-radius 更深入的一些tips. 本文属于进阶知识点，所以，下面内容不会啰嗦一些基础知识，适合有一定是要经验的小伙伴。

二、border-radius私有前缀拜拜

还有个把月就2016年了，00后都已经登上历史舞台了，大家都懂我说的意思，浏览器个把年前就把私有前缀给去掉了，现在完全没必要还傻傻使用 -webkit-border-radius , -moz-border-radius ，至少我是早就不使用了，你随意~

三、border-radius百分比值

border-radius 支持百分比值，例如 border-radius:50% . 如果大家看早些年CSS3 border-radius 的文档或者文章，会发现，根本就没有提过百分比值这一茬。究其原因，是因为百分比值的支持是后来才支持的，跟数值不是一起出来的。比方说某些老版本的Android机子， border-radius:50% 它就不认识。

不过，事情已经过去很多年了，现在大家可以不用在意这些细节了。

OK，大家都知道这个百分比是相对单位，但是，不同属性的百分比值相对的内容是不一样的，对吧，比方说 translate 是自身， width/height 是父级， background-position 需要尺寸差计算等。那这里 border-radius 的百分比值相对的属性是？

我们炒个板栗知道了：

.radius-test1 { width: 100px; height: 100px; border: 50px solid #cd0000; border-radius: 50%; }

<div class="radius-test1></div>

哦哦哦哦，我知道了，是相对于元素占据尺寸的百分比(类似jQuery outerWidth() / outerHeight() 方法代表尺寸)，也就是包含边框，padding后的尺寸。而不是单纯地相对于 width/height 值。

于是乎，我们要实现一个正方形元素的圆角效果（例如网站头像），一个 50% 就可以搞定，而无需去计算。

秋月何时了，CSS3 border-radius知多少？

border-radius 还有一个 大值特性 ，也就是值很大的时候，只会使用能够渲染的圆角大小渲染。因此，要实现一个正方形元素的圆角效果（例如网站头像），我们还可以使用一个很大的原教旨，同样是不需要计算的。例如，下面240*240像素图片，我设置圆角大小 300px ，跟上面效果一样。

咦？貌似大数值 border-radius 值好像和 50% 没什么区别啊？因为上面的图片是正方形，实际上两者区别不小，我们把上面红圈圈例子的 height 改成 200px 看看两者对应效果：

.radius-test2 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 50%; }

.radius-test3 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 300px; }

<div class="radius-test2></div>

<div class="radius-test3></div>

此时，差别就很明显了。上面的长得像马桶盖子, 而后面长得像操场跑道。

秋月何时了，CSS3 border-radius知多少？

为什么呢？ 50% 成为“马桶盖子”还好理解，宽度和高度分别50%圆角化；但是后面明明圆角300像素，比占据高度需要的圆角大小值要高出不少，为什么还是直的呢？哈哈，实际上就是因为太大了，所以才会变成的“操场跑道”。

没错，因为值大了，要弄清此问题，有必要深入下。不行了，上年纪了，困了，去洗澡睡觉了明天继续。

四、border-radius单值表现深入

由于我们平时使用 border-radius 绝大多数情况是都单值，例如 border-radius: 300px ，于是，久而久之可那会忽略这样一个事实，那就是 border-radius 单值实际上是一种简写。就跟 padding:300px , border-width:300px 是一样的，是各个方位等值时候的一种简化书写形式。但是，和一般的可简写CSS属性相比， border-radius 要比看上去的复杂的多，表面上是琅琊山伯爵，实际上是当年大梁的贵族少年。

我们将 border-radius: 300px 还原成其整容前的模样，结果是：

border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;

我勒个擦，一副把七大姑八大婆都跳出来的即视感，这么这个多~~

秋月何时了，CSS3 border-radius知多少？

虽然看上去都是 300px , 长得好像一样，实际上，表示的含义各不相同，翻译成普通话就是：

border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小;

也就是斜杠前的是水平方向，斜杠后面的是垂直方向。

虽然 border-radius 和 border-width / border-color 等都是 border 打头的，但是，两者缩写与方位的表示确实不一样的。传统的边框属性 border 四个值分别表示上边框，右边框，下边框，左边框。但是， border-radius 指的则是角落，所以，我们眼睛的关注点，需要移动下，从边框到角落(如下图所示)(每个方位都如此逆时针移动)。

秋月何时了，CSS3 border-radius知多少？

都是最多4个值，1~3个缩写的规则也是一样的（一个是边，一个是角），不赘述。

那上面提到的“水平/垂直”又是什么鬼呢？

对于正圆，我们基本上很少提“水平半径”和“垂直半径”，因为，半径都是一样长。但是，对于标准椭圆，那就不一样了，因为存在最长半径和最小半径。在web中，圆角的水平半径指的就是椭圆的水平半径，垂直半径就是椭圆下图所示的垂直半径：

一个水平半径和一个垂直半径所夹起的那 1/4 段圆弧就是我们平时看的的圆角呈现，如下变色显示：

秋月何时了，CSS3 border-radius知多少？

demo

一例胜千图，为了方便大家感受下八大婆的具体行为，我特意紧承上面的例子，制作了个可操作的实时圆角和代码的例子。

您可以狠狠地点击这里： CSS3 border-radius圆角各个属性值作用demo

秋月何时了，CSS3 border-radius知多少？

OK, 为了演示水平垂直半径，我们现在先重置0，然后让水平1和垂直1都是300像素，如下图所示：

大家会看到，左上角出现了圆弧，那这个圆弧是怎么来的呢？我们画个圈圈辅助下~

秋月何时了，CSS3 border-radius知多少？

大家发现没，原本设置的是 300 像素* 300 像素，结果最后显示的却是 200 像素* 200 像素半径下的圆弧效果，这显然不符合认知啊！！

实际上是这样的，CSS3圆角除了 大值特性 ，还有一个 等比例特性 ，就是水平半径和垂直半径的比例是恒定不变的。

回到上面例子，由于我们的元素占据宽度200像素，高度300像素。所以，根据 大值特性 ，水平方向的 300 像素只能按照 200 像素半径渲染；再根据 等比例特性 ，虽然垂直方向理论上的最大半径是 300 像素，但是受制于当初设定的 300px*300px 的 1:1 比例，垂直方向最终渲染的半径大小也是200像素。于是，我们最后得到的只是一个 200 像素* 200 像素的圆弧。

第三节末尾所提到的“反而因为值设大了”就是指的这个。

可能有人会疑问，那该如何设置才能实现等同于 border-radius:50% 的效果呢。哈哈，如果你理解了上面的内容，其实就很简单了，最关键的一点就是比例关系。我们的元素占据的尺寸是 200 像素* 300 像素。所以，只要让水平半径和垂直半径保持 2:3 的比例就可以了，然后，可以利用“大值特性”设一个你认为安全的值就可以了。

比方说2倍尺寸 border-radius: 400px/600px , 如下代码和效果：

.radius-test4 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 400px/600px; }

<div class="radius-test4></div>

是不是搞明白原理之后，之前晕头转向的表现是不是分分钟就理解了哈！

五、border-radius与图形构建

border-radius 支持的可变值足有八个（在本文戏称为八大婆，简称八婆），基本上，每一个值的变化，都会呈现不同的图形，例如，下面这样，我东拖拖，西拖拖，拖出了个英文字母D：

秋月何时了，CSS3 border-radius知多少？

或者我们可以只留一个方向或2侧的边框，可以拉出一些惊喜的效果，如下gif截图：

诸如很多的，就看你的脑洞和技术了。

本身CSS的 border 属性就可以构建三角，梯形等等，现在，再配合多变的 border-radius ，我们可以发挥的空间就更大了。但是，要想用得得心应手，还是需要深入理解 border-radius 的各个表现。

one-div 上就有些图标就是利用了 border-radius 实现的，大家有兴趣可以瞅瞅，看看人家怎么巧妙使用 border-radius 的，目的在于学习理解 border-radius ，倒不是效果本身。知其根本自然上层信手拈来。

六、结束语

说些什么结语呢？今天是小光棍节，不对，以前可以拿这事吐槽，现在说这事就是在虐单身鬼。要不放下今天钓鱼的渔获吧，天冷了，鱼塘搞的，今天鱼口很好，只钓了个把小时，给夫人炖汤喝！

秋月何时了，CSS3 border-radius知多少？

4条鲫鱼，共6.8斤，最大的条鲫鱼奔3斤去了，秋月何时了，CSS3 border-radius知多少？

还是在自己的博客写文章惬意，想放什么就放什么。

秋月何时了，CSS3 border-radius知多少？

插一下

对了，写摘要是突然想起来。有时候我们想使用透明边框优雅增加元素的点击区域，此时的圆角大小值需要把透明边框的宽度也计算在内。例如，希望圆角 2 像素，结果外面扩展了 2 像素的透明边框；此时，实际设置的 border-radius 值应该是 4px .

插一下 × 2

哦，还有……妹的，忘记说了，本来是个独立段落，算了，简单说下吧。就是我们可以单独指定 border-radius 某个角落的圆角大小，如 border-top-left-radius: 40px 这个不少同学都知道。但是，大家不一定知道：

支持最多两个值，必须使用空格分隔。分别表示水平半径和垂直半径。而 border-radius 那种斜杠 / 分隔的写法这里是不支持的，只能是空格。
中间两个方位关键字，如 top / left 的前后顺序不能改变，否则会被认为是不合法（可参见下面的测试）。 top/bottom 表示垂直方向的在前面， left/right 表示水平方向的在右边。全部写法示意：
```
.radius {   border-top-left-radius: 200px 100px;   border-top-right-radius: 200px 100px;   border-bottom-left-radius: 200px 100px;   border-bottom-right-radius: 200px 100px; }
```

上面2点一综合，就可以得到如下的记忆公式： border-垂直-水平-radius: 水平垂直

没错！前面的方位关键字和后面的半径方位不匹配！不匹配！不匹配！正好反的！

另外，偶们都不是天才，时间久了会记不得到底是垂直在前，还是水平在前。告诉大家一个一定不会记错的方法，罗永浩不是有个锤子手机吗？

秋月何时了，CSS3 border-radius知多少？

垂直在前 → 锤子在前。

OK，下面我们来测试下前面提到的不能修改方位关键字的顺序，也就是不能

~~border-left-top-radius~~

：

.radius-test5 { width: 100px; height: 100px; border: 50px solid #cd0000; border-top-left-radius: 200px 100px; } .radius-test6 { width: 100px; height: 100px; border: 50px solid #cd0000;

~~border-left-top-radius: 200px 100px;~~ }