border-radius无法实现内凹圆角，因其仅支持外凸；可用radial-gradient（四角挖空）或伪元素+overflow:hidden（单侧弧形）模拟，需注意背景、阴影及响应式适配。
纯 border-radius 做不出内凹圆角——它天生只支持外凸。要实现内凹，必须绕过边框本身，用视觉“挖空”来模拟。
为什么 border-radius 无法直接实现内凹
它作用于元素的四个角，把直角“向外”圆滑过渡；内凹是“向内”缺一块，方向相反。即使写成 border-radius: 50%/20px 或负值（无效），也只会被浏览器忽略或报错。所有声称“border-radius: -10px”能内凹的说法，都是误解。
radial-gradient 实现四角内凹（推荐，无额外 DOM）
核心是用四个径向渐变，每个负责一个角的“挖空”，靠 background-position 精确定位，靠双停点硬切形成干净边缘。
-
radial-gradient(circle at top left, transparent 12px, #fff 12px)：必须显式写circle+at top left，否则默认椭圆会拉伸偏移 - 每个角单独声明，逗号分隔：
background-image: radial-gradient(...), radial-gradient(...), ... - 必须配
background-repeat: no-repeat，否则渐变平铺满屏 - 必须配
background-position: top left, top right, bottom left, bottom right，顺序和渐变一一对应 - 停点必须相同（如
transparent 12px, #fff 12px），否则边缘发虚，看起来像阴影而非内凹
示例片段：
立即学习“前端免费学习笔记（深入）”；
card {
background-color: #fff;
background-image:
radial-gradient(circle at top left, transparent 12px, #fff 12px),
radial-gradient(circle at top right, transparent 12px, #fff 12px),
radial-gradient(circle at bottom left, transparent 12px, #fff 12px),
radial-gradient(circle at bottom right, transparent 12px, #fff 12px);
background-repeat: no-repeat;
background-position: top left, top right, bottom left, bottom right;
background-size: 24px 24px, 24px 24px, 24px 24px, 24px 24px;
}
伪元素 + overflow: hidden 模拟单侧内凹（适合顶部/底部弧形）
当只需要顶部或底部一个方向的内凹（比如卡片顶部凹陷一条弧线），用伪元素更可控，且兼容性比 mask 更广。
- 给卡片设
position: relative; overflow: hidden -
::before绝对定位，宽高远超父容器，border-radius: 50%，背景同卡片色 - 用
top: -50%+transform: translateY(-50%)把圆心拉到顶部边缘，露出下半圆，视觉即为顶部内凹 - 关键：伪元素尺寸要足够大（如
width: 200%; height: 100px），否则圆弧会被裁断
注意：若卡片已有 ::before 或 ::after 用于其他用途（如装饰图标），此法会冲突。
容易被忽略的细节：背景与阴影的配合
内凹圆角不是孤立效果。如果卡片有 box-shadow，需确认父容器没设 overflow: hidden，否则阴影被裁；如果背景是图片或渐变，内凹区域的第二停点应设为 transparent，让底层透出，而不是盖死。
最麻烦的其实是响应式场景：固定像素的 12px 内凹半径在小屏上可能太突兀，但换成 vw 又难控制精度。实际项目中，建议把内凹半径抽成 CSS 变量（如 --notch-r: 12px），并在媒体查询里分档调整。
