radial-gradient 实现内凹圆角需显式控制圆心、形状和半径：必须用 circle 形状、at 指定四角坐标、固定像素半径、双停点硬切（如 transparent 12px, #fff 12px）、配合 background-position 和 no-repeat 分层定位四角。
radial-gradient 的圆心位置和 size 必须显式控制
浏览器默认的 radial-gradient 是 ellipse farthest-corner at center，在非正方形容器里极易拉伸、偏移或截断，根本画不出稳定内凹角。想让“挖掉”的圆角刚好贴合角落，必须手动指定 circle 形状 + 精确 at 坐标 + 合理半径大小。
常见错误是只写 radial-gradient(circle, transparent 50%, #fff 50%)，结果四个角全飘在中间，或者只有一两个角生效——因为没配 background-position 和 background-size 来定位每个渐变图层。
-
at top left/at top right/at bottom left/at bottom right分别对应四角，不能用百分比混搭（如at 0 0在某些旧版 Safari 下兼容性差） - size 建议用固定像素值（如
20px），而非closest-corner——后者依赖容器尺寸，在小元素上容易把“挖空”区域撑出边界 - 每个角的渐变必须单独声明，用逗号分隔多个
radial-gradient，再靠background-position对齐到对应角落
transparent 到实色的硬切是关键，不是渐变过渡
内凹圆角本质是“挖空”，不是柔光晕。所以两个颜色停点必须设在同一位置，比如 transparent 12px, #333 12px，而不是 transparent 0, #333 12px。后者会产生模糊边缘，视觉上像外凸圆角加阴影，不是真正“缺一块”。
这个硬切点就是你想要的内凹半径。如果设成 transparent 0, #333 13px，浏览器会在 0–13px 之间插值，边缘发虚；而双 12px 强制跳变，才能干净利落地“切”出直角转内弧的效果。
- 不要用百分比停点（如
50%），它会随容器缩放失真；固定像素更可控 - 第一个颜色必须是
transparent，第二个才是背景色或边框色，顺序反了就变成“加一层”而非“挖一个洞” - 如果背景是渐变或图片，第二个颜色停点应设为
transparent，靠父层透出，否则会盖住底层
background-repeat: no-repeat 和 background-position 缺一不可
单个 radial-gradient 只能覆盖一个角。想四个角同时生效，得把四个渐变图层叠在一起，靠 background-repeat: no-repeat 防止平铺，再用 background-position 把每个图层钉到左上、右上、左下、右下。
漏掉 no-repeat 会导致渐变重复铺满整个背景；漏掉 background-position 或写错顺序（比如把右上角的渐变放在 left top 位置），结果就是某几个角完全不显示，或错位到元素外侧。
- 四个渐变声明顺序必须和
background-position顺序严格一致：左上、右上、左下、右下 - 推荐写法：
background-position: left top, right top, left bottom, right bottom -
background-size建议设为24px 24px这类略大于圆角半径的值，确保渐变图形完整不被裁剪
伪元素方案比多层 background 更易维护
当需要动态控制内凹半径、或与其他装饰（如描边、阴影）共存时，用 ::before 或 ::after 伪元素单独画四个角，比堆砌四层 background-image 更清晰。每个伪元素只负责一个角，定位、尺寸、z-index 都可独立调整。
典型坑是忘了给父元素加 position: relative，导致伪元素脱离文档流乱飘；或没设 content: ""，伪元素不渲染；或 z-index 层级错乱，把内容盖住了。
- 伪元素宽高设为
0，靠border-radius和background画形，节省 DOM 节点 - 用
transform: translate(-50%, -50%)微调圆心对齐，比硬写top: -12px; left: -12px更适应不同半径 - 如果要支持深色模式，伪元素的
background可绑定 CSS 变量，避免重复写四套渐变
radial-gradient 的圆心坐标是相对于**渐变图像自身**，不是元素内容区。所以哪怕你写了 at top left，若没配合 background-position 把这张图“挪”到左上角，它还是从元素中心开始画——这点不厘清，调一整天也出不来效果。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
