clip-path 是实现撕裂边缘最轻量方案，用 polygon 定义长短错落的锯齿坐标，需闭合路径并兼容旧 safari；叠加透明 png 撕裂图可增强质感，需精准定位、禁用重复；伪元素 ::before 偏移叠加可模拟厚度感；移动端需注意性能与格式优化。
用 clip-path 实现基础撕裂边缘
撕裂效果本质是让元素边缘不规则，clip-path 是最轻量、语义最清晰的方案。它直接裁剪渲染区域，不干扰布局流，也不需要额外 DOM 节点。
关键在于用 SVG path 或多边形坐标模拟“撕纸”锯齿：不是均匀波浪，而是长短错落、带突刺的折线。浏览器对 clip-path: polygon(...) 支持良好（Chrome 55+、Firefox 54+、Safari 15.4+），但旧 Safari 需加 -webkit-clip-path 前缀。
- 避免用纯正弦函数生成坐标——真实撕裂是随机断裂，建议手调 6–10 个点，x 坐标等距，y 坐标交替偏移 ±2px～±8px
- 首尾点必须闭合（起点 = 终点），否则裁剪失效
- 示例：
clip-path: polygon(0% 0%, 20% 3%, 40% -2%, 60% 5%, 80% -1%, 100% 0%, 100% 100%, 0% 100%);
用 background-image 叠加撕裂纹理图
纯 clip-path 只能做轮廓，没有纸张纤维、毛边质感。这时需要一张透明 PNG 撕裂边缘贴图，作为 background-image 叠在内容层上方。
核心难点是定位和缩放：撕裂图必须精准对齐容器边缘，且随容器尺寸变化时保持毛边密度一致。不能用 cover 或 contain ——它们会拉伸失真。
- 用
background-size: 100% 100%;强制铺满，再靠background-position: top left;锚定左上角 - 撕裂图本身建议做 2000×200px 大小，横向足够长，避免重复平铺露出接缝
- 必须设
background-repeat: no-repeat;，并确保容器overflow: hidden;，否则毛边溢出
用伪元素 ::before 做双层撕裂叠加
想让撕裂有“厚度感”或“阴影脱落”效果，单层裁剪或单图不够。常见做法是内容层正常显示，用 ::before 伪元素覆盖一层稍偏移的撕裂轮廓，制造错位视觉差。
这个技巧依赖层叠上下文和透明度控制，比纯背景图更灵活，也更容易响应式适配。
-
::before设content: "";、position: absolute;、top: 0;、left: 0;，宽高继承父级 - 给伪元素加
clip-path，但 y 坐标整体下移 1–2px，再设opacity: 0.7;模拟纸张微翘阴影 - 父容器需设
position: relative;，且z-index明确，否则伪元素可能被其他兄弟元素遮挡
移动端适配和性能注意点
clip-path 在 iOS Safari 上对复杂路径重绘开销明显，尤其配合 transform 动画时容易掉帧。撕裂图方案虽兼容性好，但大图会增加首屏加载压力。
- 避免在
:hover或@media (prefers-reduced-motion)下动态切换撕裂样式——触屏设备无 hover，且动画敏感用户会关闭所有过渡 - 撕裂图优先用 WebP 格式，实测比 PNG 小 40%+，iOS 14+ 全面支持
- 如果撕裂区域只是装饰性标题，考虑用
picture+srcset按 DPR 提供不同精度撕裂图，而非一张图适配所有屏幕
真正难的是让撕裂看起来“刚撕完”而不是“设计稿里画的”——毛边角度要杂乱，明暗过渡要生硬，颜色不能太干净。这些细节没法靠 CSS 自动计算，得手动调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
