This time I will bring you the text shadow of CSS3text-shadowHow to use the attribute, and the Notes on using CSS3 text-shadow text-shadow What are they? Here are actual cases. Let’s take a look.
Text shadow text-shadow attribute special effects:
1. Lower right corner shadow, lower left corner shadow, upper left corner shadow, upper right corner shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-shadow</title>
<style>
p{
text-align:center;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:10px 10px #333;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>If you change text-shadow Change text-shadow to: text-shadow:-10px 10px #333, and the shadow in the lower left corner will appear
Change text-shadow to: text-shadow:-10px -10px #333, and the shadow in the upper left corner will appear
Change text-shadow to: text-shadow: 10px -10px #333, and the shadow in the upper right corner will appear
2. Use text-shadow to set the three-dimensional text effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-shadow</title>
<style>
p{
text-align:center;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:-1px -1px #fff,
1px 1px #333;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
Detailed explanation of examples of HTML text formatting
Summary of frequently used tags in html
How to vertically center img and span in p
The above is the detailed content of How to use the text-shadow property of CSS3. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
