我们日常在画图形需要圆角时，经常使用 border-radius 来搞定，这样确实很方便，毕竟可以直接通知八个方向的角度。但是对于一些特殊需求或者是一些不规则的 border 而言，慢慢调整确实有些麻烦。今天就再给大家介绍一个新东西 corner-shape.
1. corner-shape 概念
corner-shape 属于 CSS 背景与边框模块 Level 4 中的新特性，用来扩展原本只会画圆角的 border-radius 。 以前只能做圆圆的角，现在可以在同一块盒子上做出内凹、斜切甚至介于圆和方之间的 角 。
它是一个全新的属性，用来控制圆角区域的形状，配合 border-radius 可以非常方便地做出十字形、六边形、凹角卡片、对话气泡等复杂图形。
对有边框的盒子，简单理解为：
border-radius：控制圆角半径，即弧线的大小corner-shape：控制弧线的形状，是圆、斜切、凹口还是其他形状
可以简单理解为：border-radius决定角有多大，corner-shape决定角长成什么样。
2. 语法
.box {
border: 4px solid #333;
border-radius: 20px;
corner-shape: round;
}
基本语法很简单，与 border-radius 搭配即可。
巧妇难为无米之炊必须要先有
border-radius，否则没有圆角区域可以改变形状。
3. 可选值关键字
在上述示例中，我们使用了 corner-shape: round，这里使用了 round 作为值。
其实 corner-shape 的可选值有多个，例如 round 、scoop 、bevel 、notch 、square、squircle。下面做一些简单说明：
round：默认圆角，和现在习惯的圆角一样。scoop：角被挖掉一块形成凹进去的四分之一椭圆。bevel：斜切角。notch：生成内凹的缺口角。square：强制角保持直角，等于取消圆角，即使border-radius不是 0。squircle：介于正方形和圆之间的平滑形状，可以理解为有点圆的方块。
4. 单独设置角的形状
我们可以像 border-radius 一样，自由的为每个角设置不一样的形状来完成更为复杂的需求，而不是全都一个样式。
我们主要有两种写法，一种是简写，一种是单独的方向控制。
4.1 简写
和许多的属性一样，corner-shape 也可以简写来同时控制多个方向，最少一个值，最多可以设置四个值。
- 一个值：四个角一致。
- 两个值：第一个为左上和右下，第二个为右上和左下。
- 三个值：第一个为左上，第二个为右上和左下，第三个为右下。
- 四个值：第一个为左上，第二个为右上，第三个为右下，第四个为左下。
4.2 单独方向控制
与 border-radius 一样， corner-shape 也有有 “方向版” 属性，如：corner-top-left-shape 、corner-top-right-shape 、corner-bottom-right-shape 、corner-bottom-left-shape 。
看名字就知道它们所代表的方向，这里就不细说了。
.card {
border-radius: 40px;
corner-top-right-shape: scoop;
}
5. 特殊的 superellipse()
除了使用上述列举的关键字外，还可以使用数学函数 superellipse(K) 来精细控制角的曲率。
可以把 superellipse(K) 理解为：
- K 越接近 1：越接近普通圆角（圆形）。
- K 越大：形状越接近方形，但角还是平滑的，而不是死直角。
- K 为 0：就是斜切角，类似
bevel。 - K 小于 0：变成内凹形状，类似星形或凹角，不同的负值凹陷程度不同。
.box1 {
border-radius: 40px;
corner-shape: superellipse(1); /* 接近圆角 */
}
.box2 {
border-radius: 40px;
corner-shape: superellipse(4); /* 更像正方形 */
}
.box3 {
border-radius: 40px;
corner-shape: superellipse(0); /* 斜切角 */
}
.box4 {
border-radius: 40px;
corner-shape: superellipse(-1.5); /* 内凹的角 */
}
其效果如下所示
一些关键词值其实可以看作superellipse(K)的别名：例如普通圆角round类似于superellipse(1)，而square对应极大 K 值。
6. 兼容性
目前 corner-shape 仍然是非常新的属性，主要在新版 Chromium 内核浏览器里（如较新版本 Chrome）率先实现。 在较旧或不支持的浏览器里，这个属性会被忽略，最终表现就是普通的 border-radius 圆角。
为了保证兼容性：
- 应当先写好正常的
border-radius样式作为基础效果。 - 再加上
corner-shape，支持的浏览器会增强显示，不支持的仍然是普通圆角。
7. codepen 预览
今天的分享就到这里了，后面我会增加几期实战效果，希望佬们喜欢
最后，元旦快乐！٩(‘ω’)و
点赞助力大鹅不摆烂
评论区(暂无评论)