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>
示例-模糊阴影
<!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>
示例-多个阴影
<!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>
发光效果示例
<!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>
输出: