【css】box-shadow匹配ps投影效果/text-shadow
參照資料:http://blog.csdn.net/lpandeng/article/details/72778451
box-shaow: 距離(x-offset y-offset) 虛影(blur-radius) 擴展(spread-radius) 投影色( rgba);
"角度(Angle)":投影的角度。
"距離(Distance)":陰影的距離。根據角度和距離可以換算出CSS3陰影中的x-offset和y-offet。
x-offset = Distance * cos(180 -Angle) ,
y-offset = Distance * sin(180 - Angle)
"擴展(Spread)":
"大小(Size)":陰影的大小。在CSS3中 blur-radius + spread-radius = Size 即 blur-radius = Size - spread-radius 。
以上圖中的數值為例。
eg:
如上圖:
x-offset = Distance * cos(180 -Angle) = 3*cos(180-145)= 4.09px
y-offset = Distance * sin(180 - Angle) = 3*sin(180-145)= 2.87px
blur-radius = Size - spread-radius = 10 - spread*size = 10- 10*6%= 9.4px
spread-radius = spread*size = 10*6% =0.6px
rgba 值 (118,113,133,.75)
則,對應 box-shaow: 4.09px 2.87px 9.4px 0.6px rgba(118,113,133,0.75)
類似text-shaow :4.09px 2.87px 9.4px rgba(118,113,133,0.75)
(區別在於 text-shadow 沒有 spread-radius 所以不能完全實現PS中的效果)
【css】box-shadow匹配ps投影效果/text-shadow