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)改為內部陰影舞肆。