radial-gradient 通过四个精确定位的圆形渐变在背景层“挖角”实现切角效果，需用 background-size 和 background-position 控制，固定半径如20px，配合兜底色；clip-path 虽直观但兼容性差、裁剪子元素，仅适合需动态过渡的场景。
radial-gradient 怎么画出切角效果
圆角切角不是靠 border-radius 能直接实现的，本质是用 radial-gradient 在背景层“挖”掉四个角。关键在于把渐变中心设在角落，半径设得足够小，让颜色过渡只发生在角上，形成视觉上的“被切掉”感。
常见错误是把 radial-gradient 当成普通圆角工具用，结果边缘发虚、对不齐、响应式下错位。这是因为没控制好渐变尺寸和位置。
- 必须用
background-size配合background-position精确控制每个渐变的位置和大小，不能只写一个渐变覆盖全图 - 四个角要分别定义四个
radial-gradient，顺序不能乱（否则会被后写的盖住） - 推荐用
at top left这类关键词定位，比百分比更稳定；半径建议用固定值如20px，避免缩放时变形
示例：给容器加左上+右上切角
background: radial-gradient(circle at top left, transparent 20px, #ff6b6b 20px), radial-gradient(circle at top right, transparent 20px, #ff6b6b 20px), #ff6b6b;
为什么不用 clip-path 做切角
clip-path 看似更直观，但实际项目中容易踩坑：iOS Safari 15.4 之前不支持 inset() 的圆角参数，Safari 16.4 才开始支持 path() 动态切角；而且它会裁剪子元素（比如按钮文字溢出会被砍），而 radial-gradient 只是背景层操作，不影响内容流。
立即学习“前端免费学习笔记（深入）”；
使用场景很明确：只要切角只是视觉装饰、不需要交互穿透或动态变化，radial-gradient 更稳。
- 如果需要 hover 时动态改变切角大小，
clip-path支持 CSS transition，radial-gradient不支持（背景渐变参数无法过渡） -
clip-path: inset(0 0 0 0 round 20px)在部分安卓 WebView 中渲染异常，出现锯齿或偏移 - SSR 或打印样式里，
clip-path容易被忽略，而背景渐变始终可见
兼容性与性能怎么平衡
radial-gradient 在 IE10+、所有现代浏览器都支持，包括微信内置浏览器（X5 内核 6.8+）。唯一要注意的是旧版 Android Webview（4.4.x）对多背景叠加解析不稳定——所以别省略 background-color 回退色。
性能上，纯 CSS 渐变比 clip-path 或 SVG 背景更轻量，GPU 加速友好。但写法不当会触发重绘：比如用 % 单位做半径，在视口缩放时反复计算；或者叠加太多层渐变（超过 6 层）导致渲染延迟。
- 固定单位优先用
px或rem，避免%和vw - 最多用 4 个渐变（四角），别为了“更圆润”加第五个中间过渡层
- 务必加一层
background-color作为兜底，防止渐变加载失败时白屏
优惠券布局里怎么对齐文字和边框
切角背景只是表皮，真正难的是让文字、图标、分割线跟“被切掉”的边界对齐。很多人直接 padding 撑开，结果在小屏上文字贴边、大屏上空隙过大。
核心思路是：把切角区域“预留”出来，用伪元素或内边距模拟物理边框，而不是靠背景欺骗眼睛。
- 给容器设
padding: 24px 20px 24px 36px，左侧多留是因为左上/左下都有切角，右侧同理 - 用
::before伪元素 +radial-gradient绘制切角，主体背景用纯色，避免背景层干扰文字定位 - 关键细节：切角半径为
20px时，对应方向的padding至少也要20px，否则文字会“长进”切角空白区
容易被忽略的一点：阴影（box-shadow）默认绕着矩形盒子画，不会跟着切角走。如果要真实阴影效果，得用 filter: drop-shadow()，但它会影响整个元素，慎用。
