折纸阴影需用伪元素模拟卷曲弧度并分层渐变投影，而非单纯box-shadow；关键在于position:relative父容器、content:""声明、transform旋转+skewY变形，配合linear-gradient明暗过渡与多层递减透明度阴影。
为什么直接用 box-shadow 做不出折纸阴影的“卷边感”
折纸阴影的关键不是模糊或偏移量大，而是模拟真实纸张弯曲时产生的「局部遮挡 + 方向性投影」。纯 box-shadow 所有层共用同一坐标系，无法让右下角单独“翘起”，也无法让投影随卷曲弧度自然衰减——它只会平铺出一块死板的灰块。真正要骗过人眼，得让伪元素自己“弯下去”，再带出匹配的阴影形态。
::after 必须配合 transform 和 position:relative 才能定位到角落
常见错误是 ::after 脱离容器乱飘，或者根本没显示。核心条件只有三个：
- 父容器必须设
position: relative（否则absolute定位失效） -
::after必须声明content: ""（缺了这行，伪元素不渲染） - 要用
transform: rotate()或transform: skewY()模拟卷曲弧度，不能只靠top/right
比如右下角卷起效果，典型写法是：::after { content: ""; position: absolute; bottom: 0; right: 0; width: 40px; height: 40px; background: linear-gradient(135deg, rgba(0,0,0,0.08), transparent); transform: rotate(-5deg) skewY(-8deg); }
阴影不能只靠 box-shadow，得用渐变+透明度分层模拟厚度
真实纸张卷边的阴影不是均匀扩散，而是靠近折痕处深、边缘渐淡。用单层 box-shadow 会显得像贴纸。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
background: linear-gradient()模拟折痕明暗过渡（例如从rgba(0,0,0,0.12)到transparent） - 叠加一层极淡的
box-shadow: 2px 2px 6px rgba(0,0,0,0.06)增强景深 - 如果需要更厚实的“纸张背面”感，再加一个
::before层，z-index: -1，用更深色渐变打底
注意：所有层的透明度别超过 0.12，否则像蒙了层灰布；多层时 alpha 值要逐层递减（如 0.08 → 0.04 → 0.02）
悬停交互时最容易忽略 pointer-events 和 z-index 冲突
加了 ::after 卷边后，鼠标可能点不到底层按钮或文字——不是 JS 绑定问题，是 CSS 层级吃掉了事件。必须明确控制：
- 给
::after加pointer-events: none（否则它会拦截点击） - 主内容层设
position: relative; z-index: 2，确保可交互 -
::after的z-index设为1或0，别用负值压底（Safari 对负z-index渲染不稳定）
另外，如果父容器用了 transform: scale() 或 will-change，::after 的 transform 偏移可能失准，建议统一用 transform: translate() 替代 top/right 定位
折纸阴影最难调的其实是「弧度与投影方向的一致性」：rotate 角度和渐变角度差 15° 以上，人眼就会察觉不自然；而所有层的透明度、尺寸、位移必须按比例缩放，否则悬停动画一动就露馅。
