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:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 300px 0px 0px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>The above code can set the horizontal offset of the text to 300px and the shadow color is green.
Y-axis offset demonstration:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 0px 60px 1px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>The above code can set the vertical offset of the text to 60px and the shadow color to green.
Complete code demonstration:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 10px 20px 5px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>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:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 5px 10px 5px,blue 8px 10px 6px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>
Next Section