在今年的前端会议上，苏黎世 Rachel Andrew谈到了“ 释放CSS网格布局的力量”。在演讲结束时，她提到了一些旧的CSS属性，这些属性卡在了我的脑海：
仅通过使用良好支持的边框半径即可将图像设置为圆形。不要忘记旧的CSS仍然存在并且很有用。您无需为每种效果都花哨的东西。
—雷切尔·安德鲁（Rachel Andrew）
在我听完这个演讲后不久，我认为您当然可以创造出不仅仅是圆圈的东西，并且开始更深入地研究使用边界半径可以完成的工作。
掌握边界半径
单值
让我们从基础开始。希望这不会让您感到厌烦。您可能熟悉CSS，并且也知道border-radius。它已经存在了很多年，主要使用这样的单个值：border-radius: 1em并且可能是2010年css3please.com是您最好的朋友时最受讨论/喜爱的CSS3功能之一。
每当您只使用一个值时，所有角都会以此值四舍五入：
如您在上面的示例中所见，在固定长度值（例如）旁边px，rem或者em您也可以使用百分比。通过将边界半径设置为50％，通常用于创建圆。百分比值基于给定元素的宽度和高度。因此，当在矩形上使用它时，将不再具有对称的角。这是显示border-radius: 110px和border-radius: 30%应用于矩形的区别的示例。
请注意，右侧的角不是对称的，请记住这一点。我们稍后会再讨论。
四种不同的价值观
当使用多个值时，将开始为每个角设置值，从左上角开始，然后顺时针移动。同样，您也可以使用百分比，也可以将百分比与固定长度的值混合使用。
用斜杠分隔的八个值（这在这里很有趣）
我想你们大多数人已经完成了我上面解释的所有事情。现在我们进入令人兴奋的部分。如果用斜杠分隔值并最多指定八个值，会发生什么情况？让我们看看，规范对此有何评论：
如果在斜线之前和之后给出值，则斜线之前的值将设置水平半径，而斜线之后的值将设置垂直半径。如果没有斜线，则值将相等地设置两个半径。
— W3C
因此，斜线前的值负责水平距离，而斜线后的值定义垂直长度。但是，这是什么意思？还记得矩形的百分比值吗？对于垂直和水平距离以及不对称的圆角，我们具有不同的绝对值，而这正是使用斜杠语法时得到的。
所以，当你比较border-radius: 4em 8em到border-radius: 4em / 8em的结果有很大的不同。
左侧的对称角构成圆的四分之一，而右侧的非对称角则是省略号的一部分。
老实说，您得到的形状看起来有些奇怪。但请记住您使用创建的圈子border-radius: 50%。之所以会出现一个圆，是因为定义一个边的两个值的总和为100％（50％+ 50％= 100％），并且没有直线，这使您想起了原始的正方形。如果将相同的逻辑应用于完整的8值border-radius语法，则可以创建看起来有点像拨子或有机单元格的形状：
最终，四个重叠的椭圆构成了最终的形状。容易哈！
不要惊慌……我们为您打造了一个视觉生成器
我花了一些时间来习惯这种语法。不知何故不是那么直观。为了使您的工作更轻松，我们构建了一个小工具，可以帮助您创建自己的有机形状。
不越过溪流
现在您已经知道了这8个值，您可能会感到有点难过，因为我们的border-radius-tool不能为您提供分别设置每个值的选项…请坐，这是8-POINT-FULL- CONTROL版本。
如果您足够大，您可能还记得1984年Ghostbusters电影中的这段话：
“不要越过溪流。”-“为什么？”-“那会很糟糕。”
杭州网站建设发生了类似的事情：如果您越过一侧的手柄，形状就会表现出来……让我们难以预测。但是，请您自己看看，毕竟它不会以质子的完全逆转或其他任何事情结束，但不要说我没有警告过您。
PS。非常感谢simurai。早在2010年，他就创建了一些CSS3 BonBon Button。即使它们看起来有些过时，但这也是我唯一遇到并了解过斜杠语法的地方。
