PhotoShop阴影效果转换成css中box

UI设计师根据需要设计出阴影效果，那么前端如何快速得到相应的参数呢。

阴影效果.png

混合模式：PhotoShop提供了多种混合模式，但是CSS3只支持正常模式(normal)。

颜色：阴影颜色。对应于CSS3阴影中的color值。

不透明度(Opacity)：阴影的不透明度。对应于CSS3阴影的颜色rgba()中的a。

角度(Angle)：阴影的角度。

距离(Distance)：阴影的距离。根据阴影的角度和距离，可以计算出CSS3阴影中的h-shadow和v-shadow。

h-shadowt = Distance * cos(180 - Angle)

v-shadowt = Distance * sin(180 - Angle)

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

大小(Size)：阴影的大小。

spread = Spread * Size

blur = Size - spread

box-shadow语法

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

text-shadow语法

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

text-shadow没有spread,所以不能完全实现。

h-shadow

水平阴影的距离，允许负值

v-shadow

垂直阴影的距离，允许负值

blur

模糊距离

spread

阴影的尺寸

color

阴影颜色

inset

可选，将外部阴影(outset)改为内部阴影。

参考

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。