CSS3 box-shadow

 The CSS3 box-shadow property can be used to design the shadow effect of each block in the webpage. For example, DIV , span , img can easily design good-looking shadow effects. As for why it is necessary to design shadows? Because traditional web design is relatively monotonous, the use of proper shadow can indeed improve the overall texture of the web page, but it should not be used too much, otherwise the page will be messy and lose its quality. The usage of CSS box-shadow is similar to text-shadow , but text-shadow is only applicable For text shadows, box-shadow is more suitable for block design. Mainstream browsers such as FireFox, Chrome, Safari, Opera, etc. all support the box-shadow attribute, but IE9 and earlier versions of IE do not support it.

CSS3 box-shadow basic syntax

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

Compared with text-shadow , box-shadow can set many more parameters, and the results that can be presented are more diverse.

• inset: used to set the inner shadow, optional items, no fill-in represents the outer 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 if not filled in.
• spread-radius: Spread radius, optional item, default value zero if not filled in.
• Shadow color: Necessary items, decide the color of the shadow by yourself.
  

Use the above parameters to design, and prepare a few simple examples for reference.

CSS3 box-shadow example 1: simple DIV shadow

<div style=" box-shadow:3px 3px 12px gold ;width:200px;line-height:100px;text-align:center;">CSS shadow effect</div>

Example presentation effect

CSS shadow effects

In order to make the example more clear, we made a little design for the DIV, including width, line-height , text-align, etc., but the focus is still on the red-marked shadow design. The horizontal and vertical directions are both 3px distance. , The blur range is 12px distance, you can show such a soft effect.

CSS3 box-shadow example 2: DIV inner shadow inset

<div style="box-shadow: inset 3px 3px 12px gold;width:200px;line-height:100px;text-align:center;">CSS shadow effect</div>

Example presentation effect

CSS shadow effects

Adding inset at the beginning of the box-shadow attribute means that the shadow effect is the shadow inside the block, and there is no effect outside the block, but the inside of the block is very beautiful.

CSS3 box-shadow example 3: Add shadow effects to pictures

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

Adding a shadow to the picture is quite simple, but you cannot set the inner shadow of the picture, that is, inset has no effect on the picture.