CSS3 text-shadow text shadow
Detailed explanation of the usage of text-shadow attribute of CSS3:
Before this, if you set the shadow effect of text, you usually need other tools, such as using Photoshop to create responsive pictures. It is difficult to achieve simply using CSS. Now CSS3 provides the text-shadow attribute that allows us to achieve effects that were not possible before.
Grammar structure:
In different tutorials, the grammatical structure is written in different forms. In short, they all express the same meaning, so we choose the one that is easiest to understand:
text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]...
Syntax Notes:
1. Color: represents the color value of the shadow.
2.x axis: horizontal offset, unit is pixel.
3.y-axis: offset in vertical direction, unit is pixel.
4. Blur radius: the range of influence of the shadow. It cannot be a negative value. The larger the value, the blurrier it is.
The keyword order of the above syntax structure can also have a second form:
text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...
The color of the shadow can be at the front or at the end.
Code example:
x-axis offset demonstration:
php中文网 php中文网
The above code can set the horizontal offset of the text to 300px and the shadow color is green.
Y-axis offset demonstration:
php中文网 php中文网
The above code can set the vertical offset of the text to 60px and the shadow color to green.
Complete code demonstration:
php中文网 php中文网
Multi-layer shadow:
The so-called multi-layer reference is to apply a shadow style to the text, and then Separate with commas.
The code is as follows:
php中文网 php中文网