如何使用border-radius创建非常酷的效果。
在CSS中使用指定border-radius的八个值时，可以创建有机外观形状。哇。没时间阅读全部内容？ – 我们为您制作了一个可视化工具。在这里找到它。
https://9elements.github.io/fancy-border-radius/
在今年的前端会议上，苏黎世 雷切尔安德鲁谈到了解锁CSS网格布局的力量。在她的演讲结束时，她提到了一些关于旧CSS属性的问题，这些问题一直困扰着我：
仅使用良好支持的border-radius将图像设置为圆形。不要忘记旧的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按钮。尽管它们看起来有点过时，但它是我遇到过的唯一一个关于斜杠语法的地方。
请参阅此酷炫功能
下面厦门网站建设给一个演示效果案例代码
<div class="container"></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://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2868fd5c3f30697d38732224e0ef51ed);
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);
}
}
