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阴影，且无法单独控制阴影角度，但对大多数外投影场景还原度更高。
三、通过伪元素叠加模拟多层阴影
当PSD中存在多重阴影（如内阴影+外阴影，或两个方向不同的外阴影）时，单个box-shadow或filter无法覆盖，此时可用::before/::after伪元素分层绘制。
1、为容器元素设置position: relative。
2、添加::before伪元素，设置绝对定位与第一组阴影参数：box-shadow: -3px 0 5px rgba(0,0,0,0.2)。
3、添加::after伪元素，设置另一组偏移与模糊值：box-shadow: 0 4px 8px rgba(0,0,0,0.3)。
4、确保伪元素z-index低于主内容，避免遮挡文字或交互区域。
四、导出SVG并内联使用feDropShadow滤镜
对于需要精确匹配PSD矢量图层阴影的场景，可将带阴影的图层导出为SVG，再通过
1、在Photoshop中将目标图层另存为SVG（需启用“导出为”并勾选“保留图层效果”）。
2、打开SVG文件，找到
3、在对应svg>图形元素上添加filter="url(#psd-shadow)"属性。
4、将完整SVG代码内联至HTML中，避免外部引用导致样式失效。
