PhotoShop的陰影引數轉化為css box-shadow引數
阿新 • • 發佈：2019-02-08
原文連結：https://www.jianshu.com/p/f0b7dc56ab4a
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 * Sizeblur = 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)改為內部陰影。