CSS corner-shape 怎样绘制带缺口的卡片边角

如果一个卡片只需要普通圆角，border-radius 已经足够；但当设计需要“像纸张被切掉一角”的 notch、直线切角的 bevel，或者更柔和的 scoop 时，可以把 corner-shape 叠加在圆角区域上。它负责改变圆角的几何形状，边框、背景和阴影仍然沿着这个形状绘制。

最小写法是先给元素一个非零的 border-radius，再设置 corner-shape。如果目标浏览器暂不支持这个较新的 CSS 属性，普通圆角应该仍然可用，所以要把它当作增强层，而不是唯一的视觉基础。

官方资料：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/corner-shape

先用 border-radius 建立可变形的圆角区域

corner-shape 并不是独立画一个角，它修改的是 border-radius 已经建立的圆角区域。如果没有圆角，或者圆角解析为 0，它就没有可修改的范围。

.card {
  /* 先提供圆角区域；没有非零半径时 corner-shape 没有作用范围 */
  border-radius: 28px;
  /* 给卡片一个基础外观，旧浏览器也能保留这部分 */
  background: #e9f5f2;
  border: 1px solid #2b756c;
  box-shadow: 0 14px 30px rgb(21 72 67 / 18%);
}

.card--notched {
  /* 在已有圆角上改变几何形状，形成切入式边角 */
  corner-shape: notch;
}

这里的职责可以分成三层：border-radius 提供圆角半径，corner-shape 修改角的形状，背景、边框和阴影负责把这个形状表现出来。把它们写在同一个卡片规则中，读者也更容易看出增强层依赖的基础样式。

用 corner-shape: notch 绘制带缺口的卡片

notch 适合需要明显切入感的标签卡、提示卡或分类卡。它仍然依赖 border-radius，但角的轮廓不再只是圆弧。下面让四个角采用同一种形状：

.notice-card {
  /* 基础圆角负责兼容降级和圆角面积 */
  border-radius: 24px;
  /* 四个角统一使用缺口形状 */
  corner-shape: notch;
  background: #fff8df;
  border: 2px solid #c58527;
  padding: 1.25rem;
}

.notice-card h2 {
  /* 保留标题和卡片边缘之间的稳定间距 */
  margin: 0 0 0.5rem;
}

.notice-card p {
  /* 让正文行高不依赖角形状，避免内容贴边 */
  margin: 0;
  line-height: 1.7;
}

需要注意，notch 改的是边角轮廓，不会替你解决内容内边距、溢出或响应式宽度。卡片内仍然要用 padding 保证文字与边框之间有足够空间。

按角点和方向选择 bevel、scoop、squircle

corner-shape 可以写一个到四个值。一个值应用于四个角；两个值按对角线分配；三个值把第二个值应用于右上和左下；四个值按左上、右上、右下、左下的顺序分别指定。这个映射规则适合做“只有右上角切掉”的卡片。

.feature-card {
  /* 左上 notch，右上 bevel，右下 scoop，左下 squircle */
  border-radius: 26px;
  corner-shape: notch bevel scoop squircle;
  background: #eef3ff;
  border: 1px solid #536aa8;
  padding: 1.25rem;
}

.soft-card {
  /* 只给右上和左下设置第二种形状，其余角使用第一种 */
  border-radius: 26px;
  corner-shape: round scoop;
}

常见形状可以这样理解：bevel 更接近直线切角，scoop 是向内凹的圆角效果，squircle 则比普通圆角更像连续的超椭圆。它们都不应该被当成设计系统的万能替代品，实际组合仍要服从卡片内容、边框和背景的对比度。

用 @supports 保留兼容降级

MDN 将 corner-shape 标为兼容性仍需关注的能力。稳妥做法是先写普通圆角，再用特性查询覆盖增强规则。这样不支持该属性的浏览器会得到一个正常的圆角卡片，而支持它的浏览器才会显示切角或凹角。

.promo-card {
  /* 所有浏览器共享的基础外观 */
  border-radius: 22px;
  background: #f4f6f8;
  border: 1px solid #9aa5ad;
  padding: 1rem;
}

@supports (corner-shape: notch) {
  .promo-card {
    /* 只有支持 corner-shape 的环境才改变边角几何 */
    corner-shape: notch;
  }
}

@supports not (corner-shape: notch) {
  .promo-card {
    /* 显式保留普通圆角，避免降级时依赖浏览器默认值 */
    border-radius: 22px;
  }
}

降级块不是必须的，因为基础规则本身已经保留了普通圆角；显式写出它的好处是把兼容策略记录在 CSS 里。不要在不支持的环境中依赖 corner-shape 产生关键语义，例如不要用它区分“可点击”和“不可点击”，交互状态应该由文字、焦点样式和其他可访问线索表达。

几个容易忽略的边界

• 没有 border-radius 就没有效果：先确认半径不是零，再排查 corner-shape。
• 固定尺寸会影响观感：角形状改变后，过小的卡片可能让边角与内容间距显得拥挤，应该同步调整 padding。
• 不要把兼容性当成装饰验证：生产环境仍需查看目标浏览器的兼容表，并准备普通圆角降级。
• 边框和阴影会跟随形状：如果设计只想改变背景而不想改变轮廓，需要重新考虑实现方式，而不是假设它们会分离。

速查：应该怎样选写法

总结一下：把 border-radius 当作基础盒模型，把 corner-shape 当作边角增强层；先用一个值完成统一形状，再用四值写出局部差异，最后通过 @supports 保留普通圆角。这样即使新属性没有生效，卡片的内容、边框和基本层次也不会消失。

相关问题

corner-shape 不生效时先看什么？

先看元素是否有非零的 border-radius，再看目标浏览器是否支持该属性。如果两项都满足，继续检查是否有后续规则覆盖了圆角或形状声明。

corner-shape 能替代 clip-path 吗？

不能简单互换。corner-shape 针对已有圆角的边角形状，并让边框、背景和阴影跟随；clip-path 是更广泛的裁剪机制，选择时要看你是否需要裁剪整个盒子。

只改变一个角怎么写？

可以使用四值写法，把不需要变化的角保留为 round，例如 corner-shape: notch round round round;，并配合足够大的 border-radius。