1. 程式人生 > >【css】box-shadow匹配ps投影效果/text-shadow

【css】box-shadow匹配ps投影效果/text-shadow

csdn tail 實體 換算 sin 距離 css3 .com set

參照資料: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)":

陰影的擴展大小。控制陰影實體顏色和虛化顏色的多少。 Spread * Size = 陰影中實體顏色的大小 。剩下的就是虛化的顏色。CSS3陰影 spread-radius = Spread * Size

"大小(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