There is a sense of three-dimensional text

On many websites, we’ll find text like this:

So how did they do it? The answer is that they used a new effect called text-shadow in CSS3 to create the shadow of the text, and then offset it to give it a three-dimensional feel;

New effects for CSS3: text-shadow

  • text-shadowCompatibility because CSS3 is the latest version of CSS styles, whiletext-shadowThis is one of the new styles, so we definitely need to check how compatible it is across browsers before using itcaniuseThe current browser pairs found on the websitetext-shadowCompatibility report for:

It can be seen that in addition to Internet Explorer 10 version below, the current mainstream browsers such as Chrome, Firefox, Safari, etc., support it, so we can rest assured to use it;

  • text-shadowThe usage of 1.text-shadowIs directly acting on the text, and has inheritance, as can be seen from the following figure:

Text-shadow: 1px 1px 1px rgba(0,0,0,0.5); The first value is the X-axis offset of the shadow. The X-axis offset of the shadow is the default horizontal offset from the position of the text. Negative values are allowed.

② : The second value is the Y-axis offset of the shadow. The Y-axis offset of the shadow is the default horizontal offset from the position of the text, allowing negative values;

③ : The third value is the thickness of the text shadow, the thicker the more blurred, as shown below:

The fourth value is the color of the text shadow:

PS: Finally, the font and the size of the word can be set, you can achieve the effect of stereo words;

Appendix: Shadow effects for boxesbox-shadowSome brief introduction to

1. The box shadow effect differs from the text shadow style in that it has no inheritance;

2. Box-shadow also has four values, corresponding to text-shadow.

3. Box-shadow compatibility report