用rgba()或hsla()替代纯黑#000是让阴影变柔和最有效也最易忽略的一步，因真实阴影受环境光影响带灰度、偏色和透明感，纯黑违背光学逻辑；推荐alpha值0.1–0.3，模糊越大alpha越小，并注意hsl的lightness宜设20%–40%。
直接用 rgba() 或 hsla() 替代纯黑#000，是让阴影变柔和最有效、也最容易被忽略的一步。
为什么纯黑阴影看起来“假”？
人眼在真实光照下看到的阴影从来不是纯黑——它会受环境光、表面材质、距离影响，带灰度、有偏色、有透明感。CSS里写 box-shadow: 0 2px 4px #000，等于强行告诉浏览器“这里必须是绝对无光的黑洞”，结果就是生硬、突兀、割裂。
更自然的做法是：选一个比背景略深的灰，再把透明度（alpha）压到 0.1–0.3 区间。比如浅色背景上，rgba(0, 0, 0, 0.15) 比 #000 舒服得多。
rgba() 和 hsla() 哪个更适合调阴影？
两者都行，但适用场景不同：
-
rgba()更直觉：你已经知道要“加一点黑”，就直接调 alpha 值，比如从rgba(0,0,0,0.2)试到rgba(0,0,0,0.1)，对比明显 -
hsla()更可控：当你需要阴影和主色调协调（比如品牌蓝的卡片配蓝灰阴影），用hsla(210, 10%, 30%, 0.15)可以保持色相一致，避免冷暖冲突 - 注意：
hsl()的lightness值别设太低（如10%），否则即使 alpha=0.1 也会发乌；建议控制在20%–40%之间
常见错误：模糊值大了，却还用高饱和/高对比颜色
这是新手高频翻车点：把 blur-radius 设到 20px，阴影边缘已经非常弥散，此时如果还用 rgba(0,0,0,0.5)，视觉上反而像一团脏污，而不是“光被柔化后的投影”。
正确做法是——模糊越大，alpha 越要小：
-
blur: 4px→ 可用rgba(0,0,0,0.2) -
blur: 12px→ 建议rgba(0,0,0,0.08–0.12) -
blur: 30px（如模态框浮层）→ 通常rgba(0,0,0,0.05)就够，再浓就失真
别忘了内阴影和文字阴影也适用同一逻辑
inset 阴影常用于凹陷按钮或输入框聚焦态，容易犯的错是用太重的 rgba(0,0,0,0.4)，结果像砸了个坑。试试 inset 0 2px 6px rgba(0,0,0,0.06)，轻得像一层微压。
同理，text-shadow 用 rgba(0,0,0,0.7) 做标题描边？太暴力。浅色背景上的正文，text-shadow: 0 1px 2px rgba(0,0,0,0.08) 才真正起“提神不抢戏”的作用。
真正难的不是参数组合，而是记住：阴影不是“加墨”，而是“留光”。所有数值都要服务于这个前提——越靠近真实光学逻辑，效果越耐看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
