by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11791
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、大开眼界的CSS效果

先通过几个GIF或静态图看下CSS corner-shape属性可以实现怎样的图形表现效果。

1. 十字形、菱形

2. 六边形

3. 不规则形状

4. 带指向的对话提示框

5. 各类随机图形效果（需要Chrome 139+）

6. 图形动画效果（实时渲染）

二、语法其实很简单

CSS corner-shape（角形状）属性需要配合CSS border-radius圆角属性一起使用。

其语法如下：

corner-shape: round; /* 默认值 */
corner-shape: squircle;
corner-shape: scoop;
corner-shape: bevel;
corner-shape: notch;
corner-shape: square;

各个属性值的含义参见下面的释义：

round

创建传统的圆角或椭圆角

squircle

正方形和圆形之间的平滑过渡

scoop

勺形，也就是椭圆的四分之一凹形

bevel

斜面，也就是连接角点的直线

notch

凹口，用来创建内角

square

正方形，无论边界半径如何，都保持直角（作用是用来重置为初始形态吧）

看一下同样规则的边框和圆角，在不同的角形状参数的效果。

公共HTML和CSS代码：

<canvas></canvas>

canvas {
  border: 8px solid deepskyblue;
  border-radius: 50%;
  zoom: 0.5;
  /* corner-shape: xxx */
}

1. corner-shape:round

实时渲染效果如下：

2. corner-shape:squircle

3. corner-shape:scoop

勺形:

4. corner-shape:bevel

斜面：

5. corner-shape:notch

内角（border-radius重置为40%，不然看不到）：

5. corner-shape:square

方形：

以上效果为实时渲染效果，建议将浏览器升级到Chrome 139版本以上。

三、不同的方位不同的角形状

我们可以指定不同方位不同的角形状，语法和border-radius类似，通过top、left、right、bottom等方位值。

例如：

.container {
  border-radius: 40px;
  corner-top-right-shape: scoop;
}

可生成下图所示的效果：

动画效果

不同的圆角效果是可以无缝平滑过渡的（参见本文开头的实时动画效果）：

例如：

@keyframes shape {
  from { corner-shape: round; }
  to { corner-shape: scoop; }
}

四、使用superellipse函数

corner-shape属性还支持使用superellipse(K)函数来自定义角的曲率，其中 K 值控制曲率强度。
例如，superellipse(1) 生成标准圆角，superellipse(4) 则更接近矩形，superellipse(0)是斜面，小于0则是内凹的形状（如下截图所示）。

对应CSS代码：

corner-shape: superellipse(-1.88);

这也是不同关键字之间可以无缝动画过渡的底层数学基础。

不同关键字效果对应的K值参见这个滑块效果的标识：

五、兼容性及结语

corner-shape是非常新的一个特性，目前仅Chrome 139以上版本才正式支持，我今天刚Chrome升级到这个版本。

结语

CSS的corner-shape属性是CSS背景与边框模块（Level 4）中引入的新特性，它通过扩展border-radius的功能，允许开发者自定义元素的角形状，而不仅限于传统的圆角效果，可以解决以往用 CSS 创建复杂形状时的一些痛点。

渔获展示

本周休假第一天的钓货，常熟欣欣钓场，158元5小时，大板鲫小爆护：

第二天一天的钓货，2条大草鱼，5条鳊鱼和10斤鲤鱼，主要在张家港钓的，总共钓费300多，钓了4个鱼塘，还是上海钓鱼便宜。

也欢迎关注我的钓鱼抖音号：

参考文章

• Understanding CSS corner-shape and the Power of the Superellipse

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11791

（本篇完）