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:

<!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>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本阴影</title> <style type="text/css"> .demo { width: 340px; padding: 30px; font: bold 55px/100% "微软雅黑"; color: #566F89; background: #000; text-shadow: 3px 2px 5px hsl(300,100%,50%); } </style> </head> <body> <div class="demo">PHP中文网</div> </body> </html>

submit Reset Code

Automatic operation

CSS3 text-shadow text shadow

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]