CSS box-shadow 不支持渐变色，直接写 linear-gradient() 会失效；可用 filter: drop-shadow()（依赖元素Alpha通道）或伪元素+渐变模糊模拟，后者更可控、兼容性好。
CSS box-shadow 本身不支持渐变色，别硬套
直接在 box-shadow 的颜色值里写 linear-gradient() 是无效的——浏览器会忽略整个阴影声明。这是新手最常卡住的地方，以为只是语法写错，其实是根本不可行。真正能实现“渐变阴影”效果的，是用 filter: drop-shadow() 或者伪元素 + 渐变背景模拟。
filter: drop-shadow() 最简方案，但有严格限制
它能接收一个纯色阴影，但**不能直接传渐变色**；不过它可以对已有渐变内容（比如带渐变边框或背景的元素）投下符合形状的阴影，视觉上形成“渐变阴影感”。关键点：
-
drop-shadow()只作用于元素的**Alpha通道**（即透明度轮廓），所以必须确保元素本身有透明区域或使用background: linear-gradient()+mask/clip-path切出非矩形形状 - 它不支持多层阴影、不响应
border-radius的圆角柔化（边缘仍是硬切），且在 Safari 旧版本中可能失效 - 示例：给一个带圆角和径向渐变背景的
div加filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2))，阴影会按渐变区域的透出形状投下，而非整个盒模型
伪元素 + 渐变遮罩：可控性最强的“假渐变阴影”
这是实际项目中最可靠的做法：用一个绝对定位的伪元素（::before），填充渐变色，再通过 transform: blur() 和透明度控制“阴影感”。要点：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 伪元素尺寸要比原元素略大（比如
width: calc(100% + 12px)），并居中偏移（top: 50%; transform: translateY(-50%)）来模拟阴影位置 - 模糊值不宜过大（
filter: blur(8px)常见），否则边缘发虚失真；配合opacity: 0.3控制浓度 - 渐变方向要和预期阴影方向一致，比如底部阴影常用
linear-gradient(to bottom, transparent, #0004) - 注意 z-index 层级，避免遮挡内容
面试时被问到，重点说清“为什么不用 box-shadow”和“伪元素方案的取舍”
考官真正在意的不是你写出几行代码，而是你是否理解 CSS 渲染管线中阴影的生成机制：box-shadow 是合成阶段的纯色叠加，而渐变是绘制阶段的像素填充。两者不在同一抽象层。伪元素方案虽稍重，但它规避了滤镜兼容性问题，且可精确控制模糊半径、扩散范围和色彩衰减——这些恰恰是 UI 动效落地的关键变量。
立即学习“前端免费学习笔记（深入）”；
