Design image shadow effect with CSS3 box-shadow

 Since the CSS3 box-shadow property was launched, it has been very convenient for many web designers, because traditionally there is a little trouble in designing the shadows of web pictures. You must use drawing software to add shadow effects to the pictures. If you want to modify the shadows of the finished pictures , It must be processed by drawing software again, so now the new design method is to directly use the box-shadow property of CSS3 to process. The advantage is that the design speed is fast, and the required shadow color, angle and range can be adjusted at any time. To design the image shadow effect we want, let's first take a look at the CSS3 box-shadow attribute and the basic syntax of HTML images , and then combine the two in the example to see the effect. CSS3 box-shadow property syntax

box-shadow:inset offset-x offset-y blur-radius spread-radius shadow color;

The function of each parameter is as follows

• inset: Set inner shadow, optional item, you can change the preset outer shadow to inner shadow.
• offset-x: the size of the shadow in the x-axis direction, in units of length, such as em, px, etc.
• offset-y: the size of the shadow in the y-axis direction, in units of length, such as em, px, etc.
• blur-radius: blur radius, optional item, default value zero.
• spread-radius: spread radius, optional item, default value zero.
• Shadow color: Necessary items, determine the color of the shadow by yourself, and choose the color from the color code table .

The function of these parameters is a bit complicated. For detailed usage, please refer to the introduction of our " CSS3 box-shadow ".

HTML img image syntax

<img src="Image URL" title="Image Title" alt="Image Alternative Text">

About HTML image tag is a relatively basic syntax, we will not introduce more here, please read directly: HTML img image tag .

Example of designing image shadow effect with CSS3 box-shadow

<img src="Image URL" style="box-shadow:3px 3px 12px gray;padding:3px;">

In the example, we use the box-shadow property of CSS3 to add some gray shadow effects to this Logo image. Here, "box-shadow: 3px 3px 12px gray;" means the shadow size of the x-axis and y-axis. They are all 3px, the blur radius is set to 12px, and the color is gray. Do you feel the three-dimensional visual effect that the picture seems to float? Appropriately adding some image shadows can indeed produce a more layered effect. It is indeed very easy to design image shadows through the CSS3 box-shadow property.