PSD阴影丢失需用CSS还原：一、box-shadow按距离/大小/不透明度换算rgba；二、filter: drop-shadow()更贴近PS渲染，适合透明元素；三、伪元素叠加实现多层阴影；四、SVG内联feDropShadow精确匹配矢量阴影。
如果您将PSD设计稿转换为HTML5页面时发现阴影效果丢失，则可能是由于CSS阴影属性未正确映射或图层样式未被解析。以下是还原PSD中阴影效果的几种代码实现方法：
一、使用box-shadow属性手动还原投影
Photoshop中的图层阴影（Drop Shadow）通常对应CSS中的box-shadow，需根据PSD中提供的距离、扩展、大小、不透明度和角度参数进行换算。关键在于将PSD的像素值与CSS单位对齐，并调整rgba颜色的透明度。
1、在Photoshop中双击图层打开“图层样式”，记录“距离”、“扩展”、“大小”、“不透明度”及“角度”数值。
2、将“不透明度”百分比转换为rgba的alpha值，例如50% → rgba(0,0,0,0.5)。
立即学习“前端免费学习笔记（深入）”；
3、将“距离”和“大小”相加后作为水平/垂直偏移与模糊半径，例如距离=2px、大小=6px → box-shadow: 2px 2px 8px rgba(0,0,0,0.5)。
4、若阴影有角度（如120°），需用三角函数计算X/Y偏移量，或借助在线PSD阴影转CSS工具生成初始值后再微调。
二、采用filter: drop-shadow()替代方案
filter属性中的drop-shadow()更贴近Photoshop渲染逻辑，支持真实阴影扩散与边缘衰减，尤其适用于非矩形元素（如带透明通道的PNG图标），且自动忽略元素背景色。
1、选中需添加阴影的HTML元素，例如一个或
2、在CSS中为其添加filter声明：filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.4))。
3、注意该属性不支持inset阴影，且无法单独控制阴影角度，但对大多数外投影场景还原度更高。
