立体折纸效果需用2–3层box-shadow模拟纸张弯折明暗交界，配合border-radius和background-gradient增强真实感，hover时调整阴影偏移与透明度以体现受压变化，并禁用text-shadow避免渲染异常。
立体折纸效果的核心是多层阴影叠加
纯 CSS 实现“折纸感”按钮，关键不是单层 box-shadow，而是用 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)。注意三点：
-
0 2px模拟纸张最靠近观察者的上边缘高光（浅而近） -
0 4px是主折痕阴影（中等深度，饱和度略高） -
0 8px是底部扩散阴影（更柔、更透明，体现纸张厚度）
必须配合 border-radius 和 background-gradient
折纸不是硬边立方体，真实纸张弯折处有轻微弧度。如果 border-radius 设为 0，再强的阴影也显生硬。建议设为 4px 或 6px，且上下左右一致。
纯色背景会削弱层次感。用线性渐变模拟纸张受光：
background: linear-gradient(135deg, #f9f9f9, #ebebeb);
渐变角度选 135deg（左上→右下），让亮部集中在按钮左上角，暗部在右下——这与主阴影方向（向下偏移）形成呼应，强化“纸张向右下弯折”的错觉。
hover 状态要改变阴影层级而非仅颜色
很多实现只改 background-color 或加个 transform: translateY(2px)，但这破坏折纸感：纸张被按压时，折痕加深、亮面压缩，不是整体下沉。
正确做法是调整阴影参数：
- 保持
0水平偏移（不横向移动） - 把第二层阴影从
0 4px改为0 3px（折痕上提，显得更紧） - 第三层从
0 8px改为0 6px（底部阴影收缩，体现受压回弹） - 同时降低所有阴影的
rgba第四个值（如0.12→0.09），让整体更“收”
移动端需禁用 text-shadow 防文字发虚
在 iOS Safari 或部分 Android 浏览器中，text-shadow 与多层 box-shadow 叠加会导致文字边缘出现异常半透明晕染，看起来像印刷污迹。这不是 bug，是 WebKit 渲染引擎对多重阴影的抗锯齿策略所致。
解决方式很简单：给按钮文字显式关闭 text-shadow：
button { text-shadow: none; }
如果按钮内含图标（如 SVG），也要检查其父容器是否继承了阴影样式；SVG 自身不要设 filter: drop-shadow()，否则会和 CSS box-shadow 冲突。
折纸效果的难点不在代码量，而在阴影参数的微调节奏——偏移差 1px、透明度差 0.02，就可能从“纸张”变成“塑料片”。最好在真机上反复对比自然光下的 A4 纸弯折角度，再反推 CSS 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
