CSS3 uses the text-shadow attribute to display text styles with multiple effects,

CSS3 uses the text-shadow attribute to display text styles with multiple effects,

I. effect chart display:

The text effect has been learned for a long time. But it is very practical and interesting. The text-shadow attribute provided by CSS3 can be used to add a shadow effect to the text on the page, so you can replace some of the previously used tedious images. So far, mainstream browsers such as Safari, FireFox, Chrome, and Opera support this function.

II. Introduction to the text-shadow attribute of CSS3

The text-shadow attribute adds a shadow effect to the text on the page. The basic syntax is as follows:

Text-shadow: none | <length> none | [<shadow>,] * <shadow>

Text-shadow: none | <color> [, <color>] *

The initial value of the text-shadow attribute is none, and applies to all elements.

Color: color

Length: The length value composed of floating-point numbers and unit identifiers. It can be a negative value and specifies the horizontal extension distance of the shadow.

If you do not understand the above basic syntax, refer to the following example.

<style type="text/css">    p{        text-shadow:0.1em 0.1em 0.3em #333333;    }</style>

The first value of the text-shadow attribute indicates horizontal displacement, and the second value indicates vertical displacement. The positive value is right or down, and the negative value is left or up, the third value indicates the Blur radius (optional), and the fourth value indicates the shadow color (Optional). The color value can be placed before or after the shadow length value. If no color is specified, the color attribute value is used instead.

The text-shadow attribute accepts a list of shadow effects separated by commas and applies them to the text of the element. The shadow effect is applied in a given order, so it may overwrite each other, but it does not overwrite the text itself. The shadow effect does not change the border size, but may extend beyond its boundary value. (You can delete the padding style of the p label in this example, and you will find that the shadow of the flame effect text exceeds the boundary ).

 

Iii. Code for text shadow effect:

The main use is the text-shadow list, coupled with the use of reasonable colors, we can achieve the expected results.

<style type="text/css">        p{            font-size:5em;            margin:5px;            padding:20px;            display: inline-block;        }        .p1{            text-shadow: 0.2em 0.5em 0.1em #600,-0.3em 0.1em 0.1em #060,0.4em -0.3em 0.1em #006;            color:red;        }        .p2{            background:black;            text-align:left;            text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;            color:red;        }        .p3{            text-shadow: -1px -1px white,1px 1px #333;            color:#D1D1D1;            font-weight: bold;            background: #CCC;        }        .p4{            text-shadow: 1px 1px white,-1px -1px #333;            color:#D1D1D1;            font-weight: bold;            background: #CCC;        }        .p5{            text-shadow: -1px 0 black,0 1px black,1px 0 black,0 -1px black;            color:#ffffff;            background: #CCC;        }        .p6{            text-shadow: 0 0 0.2em #F87,0 0 0.2em #f87;            color:#d1d1d1;            background: #CCC;        }    </style>

<P class = "p1"> multi-color shadow effect </p> <p class = "p2"> flame effect </p> <p class = "p3"> three-dimensional convex Effect </p> <p class = "p4"> three-dimensional concave effect </p> <p class = "p5"> Stroke Effect </p> <p class = "p6 "> luminous effect </p>

The rational use of the text-shadow attribute helps us achieve some simple and special text effects, saving us the trouble of loading some complex static image resources on the page.

Finally, thank you for reading.