使用border-radius做一些不规则椭圆形的高级效果

在CSS中使用指定border-radius的八个值时，可以创建有机外观形状。哇。没时间阅读全部内容？ – 我们为您制作了一个可视化工具。在这里找到它。

https://9elements.github.io/fancy-border-radius/

在今年的前端会议上，苏黎世 雷切尔安德鲁谈到了解锁CSS网格布局的力量。在她的演讲结束时，她提到了一些关于旧CSS属性的问题，这些问题一直困扰着我：

 - 雷切尔安德鲁

在听到这个演讲后不久，我认为你当然可以创造的不仅仅是圆圈，而是开始深入挖掘使用border-radius可以做到的事情。

掌握边界 – 半径

单一价值

让我们从基础开始。希望这不会让你烦恼。你可能熟悉CSS，你也知道border-radius。它已存在多年了，主要用于这样的单一值：border-radius: 1em并且可能是2010年最受讨论/喜爱的CSS3功能之一，当时css3please.com是你最好的朋友。

每当您只使用单个值时，所有角都会被此值四舍五入：

正如您在上面的示例中所看到的，在固定长度值旁边px，rem或者em您也可以使用百分比。这些主要用于通过将border-radius设置为50％来创建圆。百分比值基于给定元素的宽度和高度。因此，当您在矩形上使用它时，您将不再具有对称角。这是一个示例，显示矩形之间的差异border-radius: 110px和border-radius: 30%应用于矩形。

请注意，右侧的角不是对称的，请记住这一点。我们稍后再回过头来看看。

四种不同的价值观

当您使用多个值时，您开始为每个角设置值，从左上角开始，然后顺时针移动。同样，您也可以使用百分比，也可以将百分比与固定长度值混合使用。

以斜线分隔的八个值（这是它有趣的地方）

我想大多数人已经完成了我上面解释的所有事情。现在我们来到激动人心的部分。如果您使用斜杠分隔值并指定最多八个值，会发生什么？让我们看看，规范说的是什么：

– W3C

因此，斜杠前的值负责水平距离，而斜杠后的值定义垂直长度。但是，这是什么意思？还记得矩形形状的百分比值吗？我们对垂直和水平距离以及不对称圆角都有不同的绝对值，这正是您使用斜杠语法时所获得的。

所以，当你比较border-radius: 4em 8em到border-radius: 4em / 8em的结果有很大的不同。

左边的对称角形成圆的四分之一，而右边的不对称角是省略号的一部分。

老实说，你得到的形状看起来有点奇怪。但请记住您创建的圈子border-radius: 50%。你得到一个圆，因为定义一边的两个值加起来为100％（50％ 50％= 100％）并且没有剩下的直线，这会让你想起原始的正方形。如果将相同的逻辑应用于完整的八值border-radius语法，则可以创建看起来有点像拨片或有机单元格的形状：

最后，它是四个重叠的椭圆，构成最终的形状。简单哈！

不要惊慌……我们为你制作了一个视觉生成器

我花了一些时间来习惯这种语法。不知何故，这不是那么直观。为了让您的事情变得更轻松，我们构建了一个小工具，帮助您创建自己的有机形状。

做（不）穿过溪流

现在您已经了解了总共8个值，您可能会感到有点难过，因为我们的border-radius-tool并没有为您提供单独设置每个值的选项…请稍等一下，这里是8-POINT-FULL-控制版。

如果你已经够大了，你可能还记得1984年捉鬼敢死队电影的引用：

这里有类似的东西：如果你在一侧穿过手柄，那么形状就会表现出来……让我们说不可预测。但是，看看你自己，毕竟，它不会以完全的质子逆转或其他东西结束，但不要说，我没有警告你。

PS。非常感谢simurai。早在2010年，他创造了一些CSS3 BonBon按钮。尽管它们看起来有点过时，但它是我遇到过的唯一一个关于斜杠语法的地方。

请参阅此酷炫功能

下面网站建设给一个演示效果案例代码