如何使用CSS的box-shadow属性为元素添加深度效果？

box-shadow做深度的核心逻辑是模拟现实世界的光照投影规律，通过调整阴影的偏移、模糊、范围来体现元素和页面底层的距离差，最终做出立体感。

基础参数说明 #

标准语法为：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 阴影颜色 [inset];
各参数作用：

• 水平偏移：正值阴影向右偏移，负值向左偏移，对应光源在元素的左侧/右侧
• 垂直偏移：正值阴影向下偏移，负值向上偏移，日常做自然深度效果一般用正值，对应日常环境中光源从上方照射的习惯
• 模糊半径：数值越大阴影边缘越柔和，数值为0时是硬边缘阴影；通常元素抬升高度越高，模糊半径越大
• 扩散半径：正值会让阴影整体范围扩大，负值会让阴影收缩，用来微调阴影的覆盖大小
• 阴影颜色：不推荐用纯黑色，优先选低透明度的灰色、或者和页面主色调一致的低饱和色，阴影透明度越低，元素看起来离底层越远
• inset：可选参数，加上之后阴影会显示在元素内部，用来做凹陷的深度效果

常用深度效果技巧 #

• 用多层阴影模拟真实投影：现实中物体的投影不是单层的，靠近物体的部分阴影偏深、轮廓清晰，远离物体的部分阴影偏淡、范围弥散，用逗号分隔写多组阴影参数叠加，效果比单层阴影自然很多
• 阴影参数和层级匹配：如果页面有多个不同抬升高度的元素（比如弹窗>卡片>按钮），抬升越高的元素，垂直偏移、模糊半径要越大，阴影透明度要越低，保持视觉逻辑统一
• 避免阴影过重：阴影只是辅助体现层级的元素，不要让阴影的存在感超过内容本身

你给出的代码是很典型的双层柔和卡片阴影写法：

box-shadow: 4px 8px 4px -2px #ccc,  0px 0px 6px -2px #ccc;

两组参数分别对应两层叠加的阴影：

• 第一层4px 8px 4px -2px #ccc：阴影向右偏移4px、向下偏移8px，模糊半径4px，收缩2px范围，颜色为浅灰色。这层是方向明确的主投影，模拟斜上方光源打出的定向阴影，构建基础的抬升感。
• 第二层0px 0px 6px -2px #ccc：阴影无方向偏移，模糊半径6px，同样收缩2px范围，浅灰色。这层是环绕元素的弥散阴影，模拟边缘的漫反射光影，弥补第一层阴影方向感太强导致的边缘生硬问题，让整体效果更柔和。

这段代码实现的效果是元素小幅抬离页面，阴影清淡不突兀，是普通信息卡片非常常用的阴影配置。

• 可以先过一遍前端基础文档中box-shadow条目下的交互式demo，拖动调整每个参数的数值，直观感受参数变化对效果的影响，比死记定义效率高很多
• 可以直接参考主流开源组件库预设的阴影规范，这些规范已经按照不同抬升层级调好了适配的阴影参数，直接复用到项目里就能保证层级逻辑统一
• 练习时可以观察现实中物体放在平面上的投影状态：物体贴在平面上时阴影窄而深，物体抬得越高，阴影越宽、越淡、边缘越模糊，按照这个真实规律调参数就不会出大问题

内容的提问来源于stack exchange，提问作者user16547868