CSS implements text shadow

From: http://ce.sysu.edu.cn/hope/Item.aspx? Id = 13402

 

 

 

Designers often use some unique font effects and page effects. Shadow is one of them, which can make the text and elements in the page have a three-dimensional effect and thus be highlighted. For example, for text shadow, the traditional method may need to cut out text and use images directly. If Seo and website performance are considered, CSS Sprites and other technologies may be used to integrate images. Splicing images takes a lot of time, and you may need to use high-quality 32-bit PNG images to achieve better visual effects, this will make you face the problem of transparent PNG on IE 6!

In fact, we can use CSS to implement the shadow effect of text!

Text-shadow

Text-shadow allows us to achieve the perfect text shadow effect. Basic Syntax:

Text-Shadow: [color x axis blur radius], [color x axis Y axis blur radius]...

Or

Text-Shadow: [color of The Blur radius of the X axis Y axis], [color of The Blur radius of the X axis Y axis]...

The color here is the color of the Shadow. You can write the color in front or at the end. The X axis and Y axis are the offset positions of the Shadow. The Blur radius can be understood as the shadow length. Most browsers now support multi-layer shadow. You can separate multiple sets with commas (, of course, you can only use a single setting ).

This attribute is currently supported by most browsers except ie. for IE, we can use the shadow filter:

Filter: Shadow (color = 'black', ction = '000000', strength = '2 ')

You may have noticed that the shadow filter can only define the angle ction, not the XY axis, and the Z axis is changed to strength. Note: you cannot set the background color when using this filter. Otherwise, the filter will not work! In addition, if you are not good at mathematics and do not know much about trigonometric functions Algorithm You can use another IE filter: dropshadow:

Filter: dropshadow (offx = 2, offy = 2, color = 'black', positive = 'true ');

Well, Ie will always hold us back, but it is worth mentioning that the two filters of IE support multi-layer shadow! For example, you can write as follows:

Filter: dropshadow (offx = 2, offy = 2, color = 'red', positive = 'true ')

Dropshadow (offx = 2, offy = 2, color = 'yelow ', positive = 'true ')

Dropshadow (offx = 2, offy = 2, color = 'blue', positive = 'true ');

Browser compatibility of text-shadow

Currently, text-shadow is supported by Firefox 3.5 +, Safari 1.1 +/chrome 2.0 +, and opera 9.5, but not IE. It should be noted that safari only 4.0 supports multi-layer shadow.

• Ie versions do not support text-Shadow;

• Opera 9.5 + supports a maximum of 6-9 shadow layers and uses css2 to render the sequence (the first defined shadow is at the bottom ). In addition, the Blur radius is limited to PX for performance reasons;

• Gecko (Firefox) theoretically supports infinite-layer text-shadows (though not recommended) and follows the new css3 Rendering sequence (the first defined shadow is at the top );

• Safari 1.1-3.2 only supports single-layer text-shadow (only the declaration before the first comma is displayed and the subsequent declaration is ignored ). Safari 4.0 + supports multi-layer shadow and the new css3 Rendering sequence;