CSS text-shadow
CSS text-shadow
顾名思义，CSS text-shadow属性为文本添加阴影。它接受以逗号分隔的阴影列表。它的默认属性是none。它将一个或多个文本阴影效果应用于元素的文本内容。
让我们看看text-shadow属性的语法。
语法
text-shadow: h-shadow v-shadow blur-radius color| none | initial | inherit;
h-shadow：这是必需的值，它指定水平阴影的位置并允许使用负值。
v-shadow：它也是必需的值，用于指定垂直阴影的位置。它不允许负值。
blur-radius：这是模糊半径，是一个可选值。默认值为0。
color：它是阴影的颜色，也是一个可选值。
none：这是默认值，表示没有阴影。
initial：用于将属性设置为其默认值。
inherit：它只是从其父元素继承属性。
让我们通过一些插图来理解它。
示例-简单阴影
<!DOCTYPE html>
<html>
<head>
<title> font-weight property </title>
<style>
p.simple{
text-shadow: 3px 3px red;
}
</style>
</head>
<body>
<p class="simple">
Simple Shadow
</p>
</body>
</html>
Glow Effect
示例-模糊阴影
<!DOCTYPE html>
<html>
<head>
<title> font-weight property </title>
<style>
p.fuzzy{
text-shadow: 3px 3px 3px violet;
font-size:30px;
text-align:center;
}
</style>
</head>
<body>
<p class="fuzzy">
Fuzzy Shadow
</p>
</body>
</html>
Glow Effect
示例-多个阴影
<!DOCTYPE html>
<html>
<head>
<title> font-weight property </title>
<style>
p.multi{
text-shadow: -3px -3px 3px blue, 3px 3px 3px red;
font-size:30px;
text-align:center;
}
</style>
</head>
<body>
<p class="multi">
Multiple Shadows
</p>
</body>
</html>
Glow Effect
发光效果示例
<!DOCTYPE html>
<html>
<head>
<title> font-weight property </title>
<style>
.multi{
text-shadow: 0 0 .1em cyan;
background-color: black;
font-size:50px;
text-align:center;
}
</style>
</head>
<body>
<div class="multi">
Glow Effect
</div>
</body>
</html>
输出：
Glow Effect