正文
随着CSS3的兴起，前端可以自己做出阴影、圆角等效果，但是前端不是专业的设计师，
所以还是需要UI来帮我们设计效果，那么问题来了，UI设计出的效果图，我们前端怎么去正确的实现呢？
下面来看一下Photoshop投影各个参数如何转换成CSS3中的box-shadow。
box-shadow
基本语法如下：
{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
Photoshop
图1
| 名称 | 说明 |
|---|---|
| 混合模式 | Photoshop有很多混合模式，但是CSS3阴影只支持正常模式 |
| 颜色(color) | 阴影颜色。对应于CSS3阴影中的 color 值 |
| 不透明度(opacity) | 阴影的不透明度。对应于CSS3阴影的颜色 rgba() 中的 a 值 |
| 角度(Angle) | 投影的角度 |
| 距离(Distance) | 阴影的距离。根据角度和距离可以换算出CSS3阴影中的x-offset和y-offet。 x-offset = Distance * cos(180 -Angle) ， y-offset = Distance * sin(180 - Angle) |
| 扩展(Spread) | 阴影的扩展大小。控制阴影实体颜色和虚化颜色的多少。 Spread * Size = 阴影中实体颜色的大小 。剩下的就是虚化的颜色。CSS3阴影 spread-radius = Spread * Size |
| 大小(Size) | 阴影的大小。在CSS3中 blur-radius + spread-radius = Size 即 blur-radius = Size - spread-radius |
text-shadow
text-shadow 没有 spread-radius 所以不能完全实现PS中的效果。
