纯CSS优惠券可用div+box-shadow和border-radius实现立体感，配合渐变背景、clip-path撕纸缺口（需SVG降级）、clamp()响应式字体及:hover/:active交互反馈。
用 <div> + 边框阴影快速实现优惠券视觉层级
纯 CSS 就能做出带“撕纸边”感的优惠券，关键不是加复杂图形，而是用 box-shadow 和 border-radius 制造轻微立体感。别用图片或 SVG 背景——加载慢、缩放失真、改颜色还得换图。
实操建议：
-
background: linear-gradient(135deg, #ff6b6b, #ffa500)比单色更显促销感，但渐变角度别超过 150°，否则像褪色 -
box-shadow: 0 4px 12px rgba(0,0,0,0.12)是安全值；超过16px阴影会显得浮在页面上，尤其移动端 - 圆角统一用
border-radius: 12px，左上和右下可略大（如16px），模拟真实券的裁切不对称
用 clip-path 做“撕纸缺口”，兼容性要兜底
Chrome/Firefox/Edge 现代版支持 clip-path: polygon() 做锯齿状底部缺口，但 Safari 15.4 之前不支持，直接失效会变成方角——这不是 bug，是预期行为。
解决办法：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 先写
clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 92% 92%, 100% 96%, 92% 100%, 0% 100%)模拟撕口 - 立刻跟一句
background-image: url("data:image/svg+xml,...")作为降级背景（内联 SVG，无额外请求） - 别用
clip-path: path()，iOS Safari 目前完全不识别
文字排版必须用 rem + clamp() 适配多端
优惠券上的金额、有效期、使用门槛这些数字，用户一眼扫过去就要看清。用固定 px 字号在 iPhone 上挤成一团，在 iPad 上又太小。
正确做法：
- 主标题（如“¥50”）用
font-size: clamp(1.5rem, 4.5vw, 2.25rem)，确保最小不小于1.5rem（24px），最大不超过2.25rem（36px） - 副文案（如“满200可用”）用
font-size: clamp(0.75rem, 3vw, 1rem)，避免小屏时文字被截断 - 禁用
text-transform: uppercase，全大写降低数字辨识度，尤其“0/O”、“1/l”易混淆
交互反馈要绑定到 :active 而非 :hover
手机端没 hover，只写 :hover 的“点击变暗”效果在 iOS 上根本不会触发。很多开发者卡在这里，以为是 CSS 写错了。
可靠方案：
- 同时写
&:hover, &:active { transform: translateY(2px); }，:active覆盖触摸压感 - 别用
opacity变化做反馈——透明度降低会让红色优惠券变灰，削弱促销感 - 如果卡片可点击，必须加
cursor: pointer，否则部分安卓浏览器不显示手型图标
clip-path 的支持边界——它认 polygon() 但不认百分比坐标里的小数（比如 92.5%），写成 92% 或 93% 才稳。另外，所有颜色值别用命名色（如 red），一律用十六进制或 rgb，避免不同浏览器渲染偏差。 
