优惠券锯齿效果：CSS径向渐变教程

本文深入解析了如何用CSS径向渐变（尤其是repeating-radial-gradient）巧妙模拟优惠券中常见的锯齿边缘效果，直击“CSS无原生锯齿属性”的痛点，通过色标精准突变（如#fff 15px, transparent 15px）制造视觉断点，并系统拆解周期长度控制、DPR高清屏适配、伪元素层叠避让圆角裁剪、Safari兼容陷阱等实战难点，还点明业务语义（如“已使用”朝下断、“限时”朝右倾）需结合叠加渐变或SVG方案实现，是一份兼顾原理透彻性与工程落地性的前端视觉技巧干货。

径向渐变怎么画出锯齿边缘

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 嵌入，SVG 天然适配高清屏，且可内联避免请求

实际项目里，最常被忽略的是锯齿方向与业务语义的对齐——比如“已使用”优惠券的齿要朝下断开，“限时”优惠券的齿要朝右倾斜。这些不是靠渐变角度能解决的，得换思路：用两个错位的 repeating-radial-gradient 叠加，或直接切一张 2x 尺寸的 SVG 齿纹图。

到这里，我们也就讲完了《优惠券锯齿效果：CSS径向渐变教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！