PhotoShop阴影效果转换成CSS中box-shadow

CSS3阴影：

阴影效果

 

box-shadow语法：

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

text-shadow语法：

text-shadow: h-shadow v-shadow blur color;

• h-shadow = distance * cos(180 - 角度)  水平阴影距离，可负值
• v-shadow = distance * sin(180 - 角度)  垂直阴影距离，可负值
• blur = size - spread 模糊距离
• spread = spread * size 阴影的尺寸

混合模式：PhotoShop提供了多种混合模式，但是CSS3只支持正常模式(normal)。
颜色： 阴影颜色。对应于CSS3阴影中的color值。
不透明度(Opacity)： 阴影的不透明度。对应于CSS3阴影的颜色rgba()中的a。
角度(Angle)：阴影的角度。
距离(Distance)：阴影的距离。根据阴影的角度和距离，可以计算出CSS3阴影中的h-shadow和v-shadow。

扩展(Spread)：阴影的扩展大小。控制阴影实体颜色和虚化颜色的多少。
大小(Size)：阴影的大小。