纸张折叠效果需用 position: absolute 分层模拟明暗与折角：正面（z-index:3）、背面（z-index:2）、折角三角（z-index:1），父容器必须设 position: relative；阴影用双层 box-shadow 实现自然渐变，折角推荐伪元素旋转方案。
用 position: absolute 叠出纸张折叠的视觉层次
纸张折叠效果本质不是“真折”，而是用多个 absolute 定位的块模拟明暗面和折角。关键在分层：正面、背面、阴影、折角三角——每层独立定位，靠 z-index 控制前后关系。别试图用一个元素变形实现，那会卡死在 transform 透视和遮罩上。
常见错误是把所有层塞进同一个父容器却忽略 transform-style: preserve-3d 的必要性（其实这里根本不需要它）。纸张效果是纯 2D 层叠，强行加 3D 反而让阴影错位、z-index 失效。
- 父容器必须设
position: relative，否则所有absolute子元素会相对于 viewport 定位 - 正面层放最上，
z-index: 3；背面层略低，z-index: 2；折角三角最低，z-index: 1 - 阴影不用单独元素，直接用
box-shadow加在正面层底部边缘，避免多一层 DOM
折角三角怎么用 clip-path 或伪元素低成本实现
折角本质是一个右下角带斜切的直角三角形，两种主流做法：用 ::after 伪元素旋转 + 裁剪，或用 clip-path: polygon()。前者兼容性更好（IE11 都行），后者更精准但 Safari 旧版本有渲染抖动。
容易踩的坑是三角形尺寸和位置没对齐折叠线。比如纸张宽 300px，折叠点在右侧 20px 处，那三角形底边就得严格设为 width: 20px; height: 20px，再用 transform: rotate(45deg)，同时 top 和 right 偏移量要扣掉旋转后的中心偏移（约 14px）。
立即学习“前端免费学习笔记（深入）”；
- 推荐伪元素方案：
content: ""+position: absolute+width/height: 20px+transform: rotate(45deg) - 若用
clip-path，写成clip-path: polygon(0 0, 100% 0, 100% 100%)是直角三角，但得配合transform-origin: bottom right才能绕右下角翻转 - 别给折角加
box-shadow，它太小，阴影会糊成一团；改用background: linear-gradient()模拟明暗过渡更干净
z-index 不生效？检查这三点
z-index 在折叠纸张里特别敏感，因为层多、定位嵌套浅、又常混用 transform。一旦失效，背面就盖不住正面，折角飘在空中。
最常漏的是父容器没设 position。哪怕只写 position: static（默认值）也不行，必须显式声明 relative、absolute 或 fixed 才能触发层叠上下文。
- 确认所有参与层叠的元素都有
position值（不能是static） - 检查有没有祖先元素意外创建了新层叠上下文（比如带
opacity: 0.99或will-change: transform的父级） - 避免在同级元素间用过大的
z-index差值（比如 1 / 999 / 9999），数值本身无意义，只看相对大小
阴影边缘生硬？用 box-shadow 的扩散和模糊组合微调
纸张折叠处的阴影不是均匀黑条，而是靠近折痕深、向外渐淡。单靠 box-shadow: 0 4px 12px rgba(0,0,0,0.15) 会像贴了张灰纸片。
真正自然的做法是叠加两层阴影：一层紧贴底部（0 2px 0 rgba(0,0,0,0.1)）模拟硬边，一层稍远且模糊（0 6px 16px rgba(0,0,0,0.08)）模拟弥散。两者 z-index 一致，但靠模糊半径控制虚实节奏。
- 别用
filter: drop-shadow()，它会作用于整个元素轮廓，折角三角的尖角会被额外晕开 - 阴影颜色别用纯黑，
rgba(0,0,0,0.08)到0.15之间足够，高对比屏下更需压低透明度 - 如果背面层也要透出一点阴影感，给它加个极淡的
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.03)，仅限底部内阴影
折角的位置精度、z-index 的上下文边界、阴影的双层节奏——这三处稍一松动，纸张就变卡片。尤其当内容动态加载后重排，记得用 getBoundingClientRect() 校验折角坐标是否还贴合折叠线。
