Photshop投影与CSS中的box-shadow转换

参考： https://www.jb51.net/css/404167.html

（一）box-shadow

语法

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改为内部阴影。

（二）实操

• “混合模式”：Photoshop提供了各式各样的混合模式，但是box-shadow只支持正常模式（normal）。

• “颜色（color）”：阴影颜色。对应于box-shadow中的 color 值。

• “不透明度（opacity）”：阴影的不透明度。对应于color中 rgba() 中的 a 值。

• “角度（Angle）”：投影的角度。

• “距离（Distance）”：阴影的距离。根据角度和距离可以换算出box-shadow的h-shadow和v-shadow。 h-shadow = Distance * cos(180 -Angle) ， v-shadow = Distance * sin(180 - Angle)

• “扩展（Spread）”：阴影的扩展大小。控制阴影实体颜色和虚化颜色的多少。 Spread * Size = 阴影中实体颜色的大小 。剩下的就是虚化的颜色。box-shadow中 spread = Spread * Size

• “大小（Size）”：阴影的大小。在CSS3中 blur + spread = Size 即 blur = Size - spread

以上边图片为例

h-shadow: 1 * cos(180 - 90)
v-shadow: 1 * sin(180 - 90)
spread: 0 * 5
blur: 5 - 0

所以最终box-shadow的值应该为：

box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);