clip-path 比 transform 更适合折纸按钮，因其通过 polygon 裁剪+渐变阴影模拟平面分割与视觉错觉，避免 Safari 锯齿、点击偏移及 :active 状态失真，且性能稳定、响应精准。
折纸风格按钮不是靠 CSS3 3D 变换硬“折”出来的，而是用 clip-path + 渐变阴影 + 精确的伪元素层叠模拟折痕效果；盲目套用 transform: rotateX() 会导致点击区域错位、移动端失真。
为什么 clip-path 比 transform 更适合折纸按钮
折纸的核心是“平面分割+视觉错觉”，不是真实立体翻转。用 transform: rotateX() 做出的“折角”在 Safari 上常出现锯齿，且 :active 状态下无法自然压平——因为它是真旋转，而用户需要的是“按下去像纸被按瘪”的反馈。
-
clip-path能精准裁出折痕两侧的三角/梯形区域，配合linear-gradient模拟明暗交界线，视觉上更接近真实折纸 - 所有交互状态（
:hover、:active、.active）都只改变背景色或渐变方向，不触发重排，性能更稳 - 移动端 touch 事件响应区域始终与视觉区域一致，不会因
transform导致点击偏移
clip-path 折痕路径怎么写才不露马脚
常见错误是直接抄网上“五边形 clip-path”，结果在不同宽高比按钮上折痕位置漂移。折纸感来自折痕与边缘的夹角固定（通常 12°–18°），而非绝对像素值。
- 用
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%)这类相对单位，避免 px 固定值 - 折痕宽度建议设为
min(24px, 3vw)，既保证小屏可见，又防止大屏过粗 - 如果按钮含图标，
clip-path必须包裹整个button元素，不能只作用于::before伪元素，否则图标会突兀地“悬空”在折痕外
折纸阴影该用 box-shadow 还是 filter: drop-shadow()
两者都能投阴影，但 drop-shadow() 会沿着 clip-path 裁剪后的形状投，而 box-shadow 仍按原始矩形投——这会让折纸边缘的阴影看起来像“贴纸边缘翘起”，而不是纸张自然弯曲。
立即学习“前端免费学习笔记（深入）”；
- 必须用
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15))，且放在clip-path同一元素上 - 阴影模糊值不宜超过
12px，否则折痕锐利感消失；y-offset 控制在2px–6px之间，模拟纸张微翘高度 - 深色主题下，把
rgba(0,0,0,0.15)改成rgba(255,255,255,0.08)，否则阴影发灰
真正难的不是画出折痕，而是让三次点击后用户仍觉得“这纸没被按坏”——所以 hover 和 active 的颜色过渡要控制在 120ms 以内，渐变角度变化不超过 5°，否则折纸感就变成塑料反光了。
