折纸感按钮需三重box-shadow模拟纸张明暗：高光层（0 2px 4px rgba(0,0,0,0.1)）、主折痕层（0 4px 12px rgba(0,0,0,0.15)）、底部扩散层（0 8px 24px rgba(0,0,0,0.08)），配合4–6px统一border-radius与135deg线性渐变背景，hover时收缩各层偏移与透明度，移动端须禁用text-shadow。
box-shadow 多层叠加是折纸感的核心，不是加一层深色阴影就行
只写 box-shadow: 0 4px 8px rgba(0,0,0,0.2) 会得到浮雕感，不是折纸。真实纸张弯折有高光、主折痕、底部扩散三层明暗关系，必须用 2–3 层不同参数的 box-shadow 模拟。
- 第一层（高光）：
0 2px 4px rgba(0,0,0,0.1)—— 浅而近，模拟纸张上边缘受光最亮处 - 第二层（主折痕）：
0 4px 12px rgba(0,0,0,0.15)—— 偏深、略饱和，体现弯折最重的交界线 - 第三层（底部扩散）：
0 8px 24px rgba(0,0,0,0.08)—— 更柔更透，表现纸张厚度带来的自然晕染
这三组值不是固定公式，但偏移量必须递增（2→4→8），模糊值也需同步扩大，透明度则要递减。任意打乱顺序或删减层数，折纸感立刻坍塌。
border-radius 和 background-gradient 缺一不可
纯直角 + 多层阴影 = 硬塑料块；纯圆角 + 单色背景 = 毛玻璃按钮。折纸是“微弧+渐变+阴影”三者咬合的结果。
-
border-radius必须设为非零值，推荐4px或6px，且四角一致（不要border-top-left-radius单独设） -
background不能用纯色，要用linear-gradient(135deg, #f9f9f9, #ebebeb)—— 角度必须是135deg，让亮部落在左上，与向下偏移的阴影形成方向呼应 - 渐变起止色差不宜过大，否则像金属反光；
#f9f9f9到#ebebeb是安全区间
:hover 状态要收缩阴影，不是简单下移或变色
按压纸张时，折痕变紧、亮面压缩、整体“收”而不是“沉”。很多实现用 transform: translateY(2px) 或改 background-color，结果按钮像掉进坑里，失去折纸逻辑。
- 保持水平偏移为
0（不左右晃） - 把第二层阴影从
0 4px改为0 3px（折痕上提，显得绷紧） - 第三层从
0 8px改为0 6px（底部阴影收缩，体现受压回弹） - 所有阴影的 alpha 值统一降低约 0.02～0.03，比如
rgba(0,0,0,0.15)→rgba(0,0,0,0.12)
移动端必须显式关闭 text-shadow，否则文字发虚
iOS Safari 和部分 Android 浏览器在渲染多层 box-shadow 时，会对文字叠加抗锯齿策略，导致 text-shadow 出现半透明晕染，看起来像印刷污迹——这不是 bug，是 WebKit 引擎行为。
- 必须写
button { text-shadow: none; }，不能依赖继承或默认值 - 如果按钮内含 SVG 图标，检查其父容器是否意外继承了
text-shadow；SVG 自身禁用filter: drop-shadow()，否则和 CSSbox-shadow冲突 - 这个细节在桌面端常被忽略，但一旦上线到手机，用户第一眼就注意到文字糊了
折纸动效按钮的复杂点不在代码量，而在三层阴影、微圆角、方向性渐变、hover 收缩逻辑、移动端文字渲染这五者的耦合——少一个，就只是个普通按钮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
