抢先学习大开眼界的CSS corner-shape属性 « 张鑫旭-鑫空间-...

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

corner-shape属性封面图

一、大开眼界的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则是内凹的形状（如下截图所示）。

内凹效果