box-shadow本身不支持渐变色，无法实现内卷式翻页的卷曲阴影；需用::before伪元素配合linear-gradient（如to top left）、filter: blur(4px)和z-index: -1模拟真实纸张边缘压暗与柔光过渡效果。
box-shadow 本身不支持渐变色，所以直接用它做“内卷式翻页”阴影行不通。真正能模拟书页卷曲、边缘压暗、带方向性渐变阴影效果的，是 linear-gradient 配合伪元素定位和模糊处理。
用 ::before + linear-gradient 模拟卷边阴影
内卷（即页面向内弯曲）翻页的关键视觉特征是：靠近卷曲轴的一侧颜色深、透明度高，远离处迅速过渡到透明——这正是 linear-gradient 擅长的。不能靠 box-shadow，得用伪元素盖一层“假阴影层”。
- 把
::before定位在元素右下角（模拟纸张被向内卷起后露出的暗边） - 用
linear-gradient(to top left, rgba(0,0,0,0.4), transparent 70%)创建从卷边起点开始衰减的渐变 - 必须加
filter: blur(4px)，否则边缘生硬，不像真实纸张柔光过渡 -
z-index: -1确保它在主内容之下，但又不能被父容器overflow: hidden剪掉，需检查父级position和overflow
linear-gradient 方向参数决定“卷曲轴”朝向
翻页是向左卷还是向右卷？阴影是从右下往左上收，还是从左下往右上收？全靠 linear-gradient 的方向值控制。写错方向，阴影就“反着卷”，看起来像外翻或塌陷。
- 向右内卷（常见于右侧翻页）：用
linear-gradient(to top left, ...)，渐变起点放在伪元素右下角 - 向左内卷（左侧翻页）：改用
linear-gradient(to top right, ...)，同时把伪元素移到左下角 - 避免用角度如
135deg，容易因容器尺寸变化导致卷边错位；优先用to xxx关键词，语义明确且响应友好
为什么不用多层 box-shadow 模拟？
叠加多个 box-shadow 看似简单，但它在内卷场景下会暴露三个硬伤：
- 所有阴影都服从统一的模糊半径和偏移逻辑，无法实现“近端深、远端虚”的非线性衰减
- 阴影始终是矩形投射，无法贴合卷曲弧度，边缘会出现明显锯齿或漂浮感
- 移动端缩放或视口变化时，多层阴影的偏移值容易失准，而
linear-gradient是相对定位，更稳定
性能与兼容性要注意的点
filter: blur() 在低端 Android 或旧版 Safari 上可能触发重绘卡顿，尤其在滚动容器里大量使用时。
- 把模糊值控制在
2px–6px范围内，超过8px就明显掉帧 - 对 IE11 或 Android 4.x 等老环境，可加降级：
@supports not (filter: blur()) { .page::before { opacity: 0.2; } } - 慎用
background: linear-gradient(...)直接写在滚动区域的子项上——CSS 渐变本身不触发硬件加速，频繁滚动时不如transform: translateZ(0)配合伪元素可靠
linear-gradient，而是让卷边阴影的起点、角度、衰减节奏和页面交互状态（比如 hover 时卷曲加深）保持同步。这个细节一旦松动，整个“内卷”就变成“皱纸”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
