Inverted Corner内凹圆角

网页长期使用一套很小的形状词汇。矩形适合承载文字、图片与复杂布局，圆形常用在头像和状态上，胶囊适合按钮、标签与切换项。卡片再给矩形加上一点圆角，就成了今天最常见的界面容器。

这些几何稳定、好排版，也容易和浏览器的背景、边框、阴影配合。它们被反复使用之后，页面的轮廓也会越来越接近。Vibe Coding 让组件更快被做出来，默认组件之间的相似感同样会更快累积。

想给页面增加一点新意，可以先从形状语言开始。少加一层装饰，直接改变卡片怎样包住内容、怎样靠近按钮或图片，界面的节奏就会不同。

内凹圆角是一个合适的起点。它只改动一小段边界，卡片原来的文字、图片和交互都能留下；把现有圆角卡片换过来时，宽度适配与内容布局也不需要推倒重来。

那这条凹下去的边要怎么实现？如果手边正好有 Figma，第一反应多半是先把它画出来。

看到右上角的缺口，最直接的做法是在 Figma 里画好轮廓，再导出一张 SVG。只看一个固定尺寸，这条路没有明显问题：曲线可以反复调，边框也能沿 path 绘制，交付时拿到的外观和画板基本一致。

问题会在它进入真实布局后出现。把同一张 SVG 放进大卡片和小卡片，viewBox 会把路径、内容与 stroke 一起缩放。按钮需要固定点击热区，缺口需要继续容纳它，边框又希望在不同尺寸下保持相近的视觉重量，这几件事开始互相牵制。

SVG 可以通过 vector-effect="non-scaling-stroke" 保住描边宽度，也可以作为 CSS 的 background-image 使用。不过，SVG 里面的填色和路径很难继续跟着页面状态变化；外面的 DOM 仍然是矩形，内容、背景、边框和点击区域也要另外处理。同步的问题越多，这张 SVG 就越像一份需要单独维护的资源。

所以这次实现要同时满足三件事：卡片宽度可以变化，缺口和圆角的尺寸可以单独控制，内容与背景继续使用普通 DOM。在选择 CSS 写法之前，还要先看清一件事：曲线怎样连接才会顺？

先暂时放下 CSS。沿着卡片顶部向右看，轮廓会从直线进入凹面，经过缺口内壁，再回到卡片外沿。半径调大不一定更好看，每一段曲线都要顺着上一段接下去，整个缺口才会像一笔画成。

第一层检查是方向。曲线进入凹面时要顺着顶部直线，离开时也要顺着下一段边界。端点虽然对在一起，控制柄方向却不一致，连接处仍会留下细小折痕。

第二层检查是转弯速度。两段曲线共享切线以后，如果一侧突然收紧、另一侧过分舒缓，眼睛仍会读出拼接感。控制柄长度、内外半径和两侧留白需要一起调，曲率才会自然地传下去。

下面先只看外角怎样接进内角。沿着轮廓走一遍，眼睛在哪一处被绊住，折点、细缝或曲率突变通常就藏在那里。

先从改动最小的情况开始。如果四条直边还在原位，只想改变矩形的四个角，corner-shape 已经提供 round、bevel、scoop、notch、squircle 与 superellipse()。四个角还可以分别设置，目标能由内置形状完成时，不需要手写整条路径。

当缺口离开角落、进入一条边，或轮廓已经不再是矩形时，再使用 shape()。会伸展的直线写成百分比，缺口尺寸、内外半径与控制柄长度保留为 CSS 变量；卡片宽度改变时，直线段重新计算，刚才学到的端点和切线关系仍然保留。