CSS中无法直接用radial-gradient生成锯齿边缘，需通过repeating-radial-gradient配合色标突变（如#fff 15px, transparent 15px）模拟；须注意周期长度设定、dpr适配及伪元素层叠避让圆角裁剪。
径向渐变怎么画出锯齿边缘
CSS 里没有“锯齿”这种现成属性，radial-gradient() 本身是平滑过渡的。所谓“锯齿”，本质是用多个同心圆环叠加，靠色块硬切出齿状节奏。关键在 radial-gradient(circle at center, #fff 40%, transparent 40%) 这类写法：把颜色突变点卡在同一个半径位置，让过渡宽度趋近于 0，视觉上就“断”出了齿。
- 齿的密度由重复次数决定：
repeating-radial-gradient()比单次更可控 - 齿的朝向不靠旋转，而靠调整
at位置和渐变半径比例 - 别用百分比写死半径，响应式下容易错位；推荐用
px或rem配合background-size微调
repeating-radial-gradient 的参数陷阱
很多人写 repeating-radial-gradient(circle, #f00 0, #f00 10px, transparent 10px, transparent 20px) 结果没锯齿——问题出在“色标重叠逻辑”。repeating- 会自动把最后一段差值（这里是 transparent 20px）作为周期长度，然后无限平铺。但如果你漏掉起始透明段，或两段颜色终点相同，浏览器就无法识别断点。
- 必须保证至少一组“实色→透明”的突变，且两个相邻色标值严格相等（如
#ff0 15px, transparent 15px） - 周期长度 = 最后一个色标值（如
20px），所有计算都基于它；改这个值才能调疏密 - Safari 对小数值（如
0.5px）支持不稳定，建议最小单位设为1px
优惠券圆角+锯齿组合时的层叠冲突
优惠券常带 border-radius 和投影，但 radial-gradient 背景图一旦被裁剪，锯齿就会被圆角“吃掉”边缘。这不是渐变画错了，而是容器盒模型优先级更高。
- 不要用
overflow: hidden强裁，它会直接砍掉锯齿尖 - 正确做法：把锯齿做成伪元素
::before，并用z-index确保它浮在圆角内容层之上 - 投影要加在父容器，别加在锯齿层，否则阴影也会被截断
- 如果用
clip-path做异形优惠券，锯齿背景必须放在clip-path作用的同一元素上，否则失效
移动端高倍屏下锯齿模糊怎么办
在 iPhone 或安卓高端机上，明明写了 1px 齿宽，结果看起来像 2px 宽还发虚——这是设备像素比（dpr）把 CSS 像素拉伸了，而渐变色标没做适配。
立即学习“前端免费学习笔记（深入）”；
- 别依赖视口缩放或
transform: scale(0.5)，会导致整个元素失真 - 实测有效方案：用媒体查询检测 dpr，动态缩放
background-size，例如@media (-webkit-min-device-pixel-ratio: 2) { background-size: 20px 20px; } - 更稳妥的是放弃纯 CSS 锯齿，改用 SVG
<pattern></pattern>嵌入，SVG 天然适配高清屏，且可内联避免请求
实际项目里，最常被忽略的是锯齿方向与业务语义的对齐——比如“已使用”优惠券的齿要朝下断开，“限时”优惠券的齿要朝右倾斜。这些不是靠渐变角度能解决的，得换思路：用两个错位的 repeating-radial-gradient 叠加，或直接切一张 2x 尺寸的 SVG 齿纹图。
