CSS3 shadow - shadow effect

 CSS3 shadow can be used to create a shadow effect, which is suitable for the shadow design of a certain block (such as DIV , span , img ) or text, eliminating the traditional work of having to create a shadow effect with graphics files, and directly through CSS3 shadow , The two commonly used shadow effects can be divided into box-shadow and text-shadow , where box-shadow is used to design a single block shadow effect, and the text-shadow effect is set through text-shadow , but the current IE The latest version of IE8 does not support CSS3 shadow effects. You must use other methods to render the effect in IE browser. Browsers such as FireFox, Chrome, Safari, Opera are supported. Two simple examples are provided below for reference.

1. CSS3 box-shadow example

<span style="box-shadow:3px 3px 5px 6px #cccccc;">CSS shadow block shadow effect</span>

Use box-show to make shadow rendering effect on span, such as

CSS shadow block shadow effect.

CSS3 box-shadow can also make shadow effect on image or DIV block. Please refer to: CSS3 box-shadow .

2. CSS3 text-shadow example

<font style="text-shadow:2px 2px 2px #A8FF55;">CSS3 shadow text shadow effect</font>

Use text-shadow to make a shadow rendering effect on the text, such as

CSS3 shadow text shadow effect. In

this example, we use the text-shadow technique to add a pink-green shadow effect to the text. After comparing the two examples, you can see that the block is done Although the method of shadowing is similar to the method of shadowing text, it is actually not the same. Please refer to the detailed text-shadow explanation: CSS3 text-shadow .