Box-shadow transformation in photoshop projection and CSS

Box-shadow is the addition of a perimeter shadow effect to the element block, and the conversion of the Photoshop projection to the Box-shadow in the CSS

Text-shadow is to add a shadow effect to the text, and Box-shadow to add a perimeter shadow effect to the element block.

The basic syntax is {box-shadow:[inset] x-offset y-offset Blur-radius Spread-radiuscolor}

"Mixed Mode": Photoshop offers a variety of blending modes, but the CSS3 shadow only supports normal mode.

Color: the shadow color. Corresponds to the color value in the CSS3 shadow.

Opacity (opacity): The opacity of the shadow. A value in the color Rgba () that corresponds to the CSS3 shadow.

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.

Color:rgba (118,113,113,.75)
X-offset:5 * cos (180°-145°) = 4.09px
Y-offset:5 * sin (180°-145°) = 2.87px
Spread-radius:10 * 6% = 0.6px
blur-radius:10-0.6 = 9.4px;box-shadow:4.09px 2.87px 9.4px 0.6px rgba (118,113,113,.75);
text-shadow:4.09px 2.87px 9.4px Rgba (118,113,113,.75);

Box-shadow transformation in photoshop projection and CSS