网页底部平滑阴影过渡需用伪元素+垂直渐变模拟，而非直接box-shadow：设footer为relative，::after用linear-gradient(transparent,rgba(0,0,0,0.3))、blur(6px)、z-index:-1覆盖底部，并支持CSS变量与transition实现悬停或滚动动态响应。
网页底部实现平滑阴影过渡，关键不是直接给 加 box-shadow，而是用渐变背景模拟“自然消散”的阴影感——它更柔和、更贴合底部边缘，且能随滚动或状态变化动态响应。
用伪元素 + 垂直渐变模拟底部阴影
这是最常用也最可控的方式：在页脚容器上添加一个绝对定位的伪元素，用 linear-gradient 从半透明黑向下渐隐，并配合 filter: blur() 扩散边缘。
- 给
footer设置position: relative，为伪元素提供定位上下文 - 用
::after创建遮罩层，覆盖在页脚下方（bottom: -10px），宽度铺满，高度设为20px - 背景用
linear-gradient(transparent, rgba(0,0,0,0.3))实现由无到有的渐变 - 加
filter: blur(6px)让边缘自然晕开，z-index: -1确保不遮挡内容
配合 transition 实现悬停/滚动时的阴影变化
如果希望页脚阴影随用户交互增强（比如鼠标移到页脚区域时加深），可将伪元素的透明度或模糊值设为 CSS 变量，再通过 :hover 或 JS 控制变量变化。
- 定义变量：
--shadow-alpha: 0.2; --shadow-blur: 4px; - 伪元素中使用：
background: linear-gradient(transparent, rgba(0,0,0,var(--shadow-alpha))); filter: blur(var(--shadow-blur)); - 在
footer:hover中修改变量值，再搭配transition: --shadow-alpha 0.3s, --shadow-blur 0.3s;
适配滚动场景：让阴影随页面滚动淡入
若页脚固定在视口底部（position: fixed），可用 scroll-timeline + @keyframes 驱动渐变强度，但兼容性有限；更稳妥的做法是监听 scroll 事件，动态更新 CSS 变量：
- JS 获取滚动比例：
const progress = Math.min(window.scrollY / (document.body.scrollHeight - window.innerHeight), 1); - 设置变量：
document.documentElement.style.setProperty('--scroll-shadow', progress.toFixed(2)); - CSS 中用
calc()或自定义函数映射该值到透明度或模糊度
避免常见坑点
这类效果容易出问题的地方不在写法，而在细节控制：
- 不要对整个
footer直接加大box-shadow—— 它会向四面发散，破坏“底部专属”感 - 渐变方向必须是
to bottom或省略（默认向下），否则阴影会上飘或侧移 -
blur()值不宜超过8px，否则在高分屏或缩放下易出现锯齿或渲染延迟 - 移动端慎用
filter，部分安卓 WebView 性能较差，可降级为单层box-shadow回退方案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
