用linear-gradient模拟撕边效果，核心是-45deg斜向多段透明渐变叠加锯齿clip-path，配合伪元素定位与微调旋转，兼顾性能与兼容性。
在 H5 页面中实现优惠券“撕边”效果的渐变阴影过渡，核心是用 linear-gradient 模拟纸张被撕开后边缘不规则、半透、带明暗过渡的视觉感，而不是依赖图片或复杂 SVG。关键在于：用多层渐变叠加控制边缘的透明度、色阶和方向，再配合 clip-path 或伪元素塑形。
1. 用伪元素 + 线性渐变模拟撕边阴影
推荐用 ::before 或 ::after 绘制撕边层，覆盖在优惠券主体右上/右下角（常见撕口位置），通过斜向渐变制造“由实到虚”的过渡：
.coupon {
position: relative;
background: #fff;
border-radius: 8px;
}
.coupon::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 60px; height: 60px;
background: linear-gradient(
-45deg,
transparent 40%,
rgba(0, 0, 0, 0.08) 60%,
rgba(0, 0, 0, 0.12) 80%,
rgba(0, 0, 0, 0.16) 100%
);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
/* 可选：加轻微 rotate(-2deg) 增强手撕随机感 */
}说明：
– 渐变角度 -45deg 让阴影沿对角线延伸，更接近真实撕纸的纤维拉伸方向；
– 多段透明→深灰过渡，避免生硬边界，体现纸张厚度与背光衰减；
– clip-path 限定区域，防止渐变溢出；
– 实际使用时可复制多个伪元素，错位叠加（如右上 + 右下）增强立体感。
2. 结合锯齿状 clip-path 强化“撕裂”形态
纯渐变还不够“撕”，需配合不规则轮廓。可用 CSS clip-path 的 polygon() 手动定义几个锯齿点，再叠加渐变：
.coupon-tear {
position: relative;
}
.coupon-tear::before {
content: '';
position: absolute;
top: -10px; right: -10px;
width: 80px; height: 80px;
background: linear-gradient(
135deg,
transparent 0%,
rgba(0,0,0,0.06) 30%,
rgba(0,0,0,0.14) 70%,
rgba(0,0,0,0.2) 100%
);
clip-path: polygon(
0% 0%, 100% 0%,
90% 20%, 100% 40%,
85% 60%, 100% 80%,
92% 100%, 0% 100%
);
}要点：
– 锯齿坐标不必精确，3~5个起伏点就足够传达“撕”的语义；
– 渐变方向建议用 135deg 或 -45deg，与锯齿走向呼应；
– 高度值（如 top: -10px）让撕边微微探出，增强层次。
3. 响应式适配与性能优化建议
H5 页面需兼顾低端安卓机，避免过度渲染：
立即学习“前端免费学习笔记（深入）”；
- 慎用
box-shadow叠加渐变——它会触发全层重绘，优先用background: linear-gradient+clip-path； - 撕边尺寸用
px固定（如 40–80px），避免用vw导致小屏过重； - 为兼容老版 Android（如 UC 内核），可加降级：
background: rgba(0,0,0,0.1)作 fallback； - 若需动态切换（如点击展开优惠券），用
transform: scale(1.02)微调，比重绘渐变更轻量。
4. 进阶：用 conic-gradient 做局部高光（可选）
追求更高质感时，可在撕边内侧加一像素宽的锥形渐变高光，模拟纸张反光：
.coupon-tear::after {
content: '';
position: absolute;
top: 5px; right: 5px;
width: 50px; height: 50px;
background: conic-gradient(
from 0deg,
transparent 0%, transparent 70%,
rgba(255,255,255,0.3) 75%,
transparent 80%
);
clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
}注意：conic-gradient 兼容性较好（Chrome 69+、Safari 15.4+、Android Webview 80+），H5 场景基本可用；若需兼容更低版本，跳过此项不影响主效果。
不复杂但容易忽略：撕边不是越黑越真，而是“弱对比 + 方向感 + 形态随机”。用好 -45deg 渐变 + 手动锯齿 clip-path，就能在 20 行 CSS 内做出轻量又可信的优惠券撕边效果。
