CSS3 text-shadow - text shadow effect

 CSS3 text-shadow is used to design text shadow effects. Usually we will use it on web page titles to increase visual effects. It can also be used in the design of some artistic fonts, so you don’t need to use GIMP or Photoshop and other drawing software. Easily make shadow effects. text-shadow is supported by almost all mainstream browsers, but IE9 and earlier versions of IE browsers do not support the text-shadow attribute. Most mainstream browsers such as FireFox, Chrome, Safari, Opera, etc. support CSS3 text -shadow attribute.

CSS3 text-shadow basic syntax

 text-shadow: the shadow of the X-axis direction and the Y-axis direction of the shadow blur range shadow color;

The properties of CSS3 text-shadow are divided into four parts: X-axis shadow, Y-axis shadow, blur range, and shadow color. Each part is separated by a half-shaped blank, which means that you can set the text horizontally and For shadows in two vertical directions, the third "fuzzy range" is an optional item, but if it is not set, it may be less soft. Please compare it yourself to see which output is more in line with the web style. The unit of the first three parameters is The length can be em, px, etc. The last shadow color is also a required item.

CSS3 text-shadow example

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

The results are as follows: In the CSS3 shadow effect

example, we set the X axis, Y axis and the shadow range to 3px, and the color is light gray (color code #cccccc) to create a soft shadow effect, is it more three-dimensional Feel it? This special effect is not visible in IE9 and earlier versions of IE browsers. Suppose we cancel the third attribute, it will appear a bit rougher, like the following.

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

The results are as follows: CSS3 shadow effect

CSS3 text-shadow Example 2: Blooming effect

<font style="text-shadow:0px 0px 15px #FF37FD;">CSS3 shadow blooming shadow effect</font>

The results are as follows: CSS3 shadow blooming shadow effect.

We set the X-axis and Y-axis shadows to zero first, control the shadow range at 15px, and choose light purple (color code #FF37FD) to create such blooming Text shadow effects. In the past, such effects must be processed in the drawing software first. Now CSS3 text-shadow is really convenient, but text-shadow can only process text. If you want to process block shadow effects, please use CSS3 The box-shadow attribute.