Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use the text-shadow font projection attribute style in css. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Text-shadow is the CSS attribute word with Hu effect of css text shadow, css font projection and font shadow.

Css text-shadow shadow effect

I. introduction to text-shadow

Text-shadow is a CSS pattern attribute word, which is the CSS of whether the calligraphy font of the Chinese text of the configuration object can have shadow and ambiguous results.

1. The value of text-shadow

Four values are set for a long time, each value space is separated, and the value separation: a shadow hue, the left isolation distance from the upper left corner of the shadow font, the upper interval from the upper left corner of the shadow font, the shadow height width (blur horizontal).

Text-shadow Analytical Diagram

Text-shadow:#000 3px 4px 5px

Confession:

Set the color of the pen and ink shadow in the equipment object to be color, the shadow to the left 3px from the upper left corner of the font, the shadow to the 4px from the upper left corner of the font, and the shadow size (width and height) ambiguity to 5px.

2. Shadow size and Hanhu

Text-shadow has three values, the first two configure the shadow position, and the last one sets the shadow size blur level. The larger the value, the more blurred the nature. The smaller the value, the smaller the size of the natural shadow.

The relationship between Shadow size and ambiguity

From the above picture, we can see that the larger the shadow value, the more ambiguous the shadow.

3. Compatibility

IE8 and above readers are compatible, and tributary readers are compatible, such as Google chrome and Apple.

Second, easy to use

1. Css code

Div {text-shadow:#F00 3px 4px 5px} p {text-shadow:#000 1px 1px 2px}

2. Confession

Div {text-shadow:#F00 3px 4px 5px}

Configure DIV calligraphy shadow blood color, shadow isolation distance left and top are 3px and 4px, shadow size blur category is 5px

P {text-shadow:#000 1px 1px 2px}

Configure p-ink shadow black, shadow separation left and top for 1px, shadow field size 2px

3. Screenshot

Achievement of css font shadow example

III. Simplified examples of css shadows

In a paragraph, specify several text that use text-shadow to configure shadow results.

1. Code

Text shadow example CSS5.ebox {font-size:16px;bac kilogram round: # 000; text-align:center;color:#666; width:300px; height:100px; line-height:40px} .yying {text-shadow:#FFF 1px 1px 1px; color:#000} learn CSS and go to CSS5! On the "css text-shadow font projection attribute style how to use" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.