Photoshop projection and CSS box-shadow conversion, cssbox-shadow

Photoshop projection and CSS box-shadow conversion, cssbox-shadow

"Mixed mode": Photoshop provides a variety of mixed modes, but CSS3 shadow only supports normal mode ).

"Color": shadow color. Corresponds tocolorValue.

"Opacity": Specifies the opacity of the shadow. Color corresponding to CSS3 shadowrgba()InaValue.

"Angle": the projection Angle.

"Distance (Distance)": the shadow Distance. The angle and distance can be used to calculate the x-offset and y-offet in the CSS3 shadow.x-offset = Distance * cos(180 -Angle),y-offset = Distance * sin(180 - Angle)

"Spread": the size of the Shadow extension. Controls the color of the Shadow object and the number of blurred colors.Spread * Size = Size of the color of the Shadow entity. The rest is The Blur color. CSS3 shadowspread-radius = Spread * Size

"Size": the shadow Size. In CSS3blur-radius + spread-radius = SizeThat isblur-radius = Size - spread-radius.

Take the value in as an example.

color: rgba(118,113,113,.75)x-offset: 5 * cos(180°- 145°) = 4.09pxy-offset: 5 * sin(180°- 145°) = 2.87pxspread-radius: 10 * 6% = 0.6pxblur-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);

text-shadowNospread-radiusTherefore, the PS effect cannot be fully realized.