How to use text-shadow of CSS3 to realize font shadow

This article mainly introduces how to use CSS3's text-shadow to achieve font shadow related knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe you will have something to gain after reading this article on how to use CSS3's text-shadow to achieve font shadow, let's take a look.

I. CSS3 words and Grammar

1. CSS3 word:

Text-shadow

2. Grammatical structure

P {text-shadow:5px2px6px#000;}

Set the text shadow effect in the p box to the left 5px and the distance 2px to show the shadow effect, while the shadow size range is 6px, the shadow color is black (# 000).

3. Description

The text displays the shadow effect with a total of four values, the first one represents the distance to the left, the second value represents the distance to show the shadow effect, the third value represents the size of the shadow range, and the fourth value is the shadow effect color.

II. Cases

1. Case HTML code

Font Shadow online Demo DIVCSS5

I shadow the text.

Text Shadow Test content 1

Text Shadow Test content 2

2. Corresponding CSS code:

.txt {text-shadow:5px1px6px#F93}

.txt2 {text-shadow:1px1px1px#000;padding:10px0;color:#FFF;background:#CCC}

This is the end of the article on "how to use CSS3's text-shadow to achieve font shadow". Thank you for reading! I believe that everyone has a certain understanding of "how to use CSS3's text-shadow to achieve font shadow" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.