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

如何使用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); } }

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 使用border-radius做一些不规则椭圆形的高级效果
分享到:
赞(0)
广告位820*80