"CSS" Box-shadow matching PS projection effect/text-shadow

Reference Material: http://blog.csdn.net/lpandeng/article/details/72778451

Box-shaow: Distance (X-offset Y-offset) Phantom (Blur-radius) extension (Spread-radius) projection color (RGBA);

Angle (Angle): The angle of the projection.

distance (Distance): The distance of the shadow. The X-offset and Y-offet in the CSS3 shadow can be converted according to the angle and distance.

X-offset = Distance * cos (180-angle),

Y-offset = Distance * sin (180-angle)

Extended (Spread): The extended size of the shadow. Controls how much of the shadow solid color and the bokeh color. Spread * size = the size of the solid color in the shadow. The rest is the color of the blur. CSS3 Shadow Spread-radius = spread * Size

Size: The size of the shadow. In CSS3 Blur-radius + Spread-radius = Size is Blur-radius = Size-spread-radius.

Take the values in the example.

eg

Such as:

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 value (118,113,133,.75)

Then, the corresponding box-shaow:4.09px 2.87px 9.4px 0.6px rgba (118,113,133,0.75)

Similar text-shaow:4.09px 2.87px 9.4px rgba (118,113,133,0.75)

(The difference is that Text-shadow does not have spread-radius so it can't fully achieve the effect in PS)

"CSS" Box-shadow matching PS projection effect/text-shadow