径向渐变通过偏移中心、控制半径和透明过渡模拟切角效果，需用 background-clip: padding-box 防干扰，叠加四个渐变按左上→右上→左下→右下顺序，兼容性好且无需 clip-path 或 mask。
径向渐变怎么画出切角效果
不是真“镂空”，而是用 radial-gradient 在背景层模拟视觉上的缺角。关键在于把渐变中心偏移到角落，半径设得刚好覆盖切口区域，再用透明色过渡出平滑边缘。
- 切角大小由渐变半径（如
20px）和位置（如top left）共同决定 - 必须配合
background-clip: padding-box，否则圆角和切角会受border-radius干扰 - 多个切角要叠加多个
radial-gradient，顺序不能错：左上 → 右上 → 左下 → 右下，否则后写的会盖住前写的
CSS实现四角切角优惠券的完整写法
直接给一个可粘贴的最小可用代码块，重点在背景层叠逻辑和尺寸控制：
background: radial-gradient(circle at 0 0, transparent 20px, #ff6b35 20px), radial-gradient(circle at 100% 0, transparent 20px, #ff6b35 20px), radial-gradient(circle at 0 100%, transparent 20px, #ff6b35 20px), radial-gradient(circle at 100% 100%, transparent 20px, #ff6b35 20px), #fff; background-clip: padding-box; padding: 16px; border-radius: 12px;
注意：background-clip: padding-box 是必须的，否则四个渐变会从 border 区域开始渲染，切角位置偏移、边缘发虚。
为什么不用 clip-path 或 mask
clip-path 看似更直观，但 Safari 对 inset() 的圆角支持不一致，iOS 16.4 之前不支持 inset(0 0 0 0 / 12px) 这种写法；mask 则在部分安卓 WebView 中有渲染闪烁问题。而 radial-gradient 兼容性好（Chrome 10+、Safari 5.1+、Firefox 3.6+），且不触发重排。
立即学习“前端免费学习笔记（深入）”；
- 如果需要响应式切角（比如小屏缩为
12px），直接改所有渐变里的20px值即可，无需 JS - 不要给容器加
overflow: hidden，它会截断渐变边缘，导致切角生硬
常见错误：切角边缘出现白边或颜色溢出
本质是渐变色与底色没对齐，或者透明过渡不够自然。最常踩的三个坑：
- 忘了写
background-color或主背景色，只靠渐变堆叠，结果在非切角区域漏出父容器背景 - 渐变中用了
rgba(255,107,53,0.9)这类半透色——切角交界处会叠加出深色重影，一律用纯色 +transparent - 把
border-radius设得比切角半径还小（比如border-radius: 8px但切角用20px），导致圆角被切角“顶破”，视觉断裂
复杂点在于：切角半径、圆角值、内边距三者要协同。改其中一个，另外两个往往也要微调，不然优惠券看起来“不稳”。
