萧雁翎
经常会有设计师在PS中是使用图层样式这种方式去给形状, 文字等加上投影或者内阴影, 这里如果要相对精准的去实现的话, 不能只靠测量工具去测量阴影长宽高了, 得用一种转换的方式(其实是有一些插件是可以帮助你去实现转换), 我说一下这个转换的计算方式:"混合模式": PS中的混合模式较为复杂(正常,叠加,柔光...blah blah), 但是在目前各个浏览器的事实实现标准里只实现了'正常'(normal)."颜色(color)": 阴影的颜色, 也就是对应CSS里面的color值."不透明度(opacity)":不透明度, 也就是对应CSS里面的color取值为rgba时的a的值. "角度(Angle)":投影的角度."距离(Distance)":阴影和原对象的距离. 根据角度和距离可以换算出CSS阴影中的x-offset和y-offet的值:x-offset = Distance * cos(180 -Angle)y-offset = Distance * sin(180 - Angle)"扩展(Spread)":阴影扩展出来的大小. 这是用来调整阴影跟原对象颜色多少和要虚化的颜色的多少. Spread * Size = 原对象阴影的颜色多少. 剩下的就是虚化的颜色多少. CSS的阴影计算是:spread-radius = Spread * Size"大小(Size)":阴影的大小. 在CSS中blur-radius + spread-radius = SizeAKA:blur-radius = Size - spread-radius