text-shadow 详细讲解,同时写一个html例子
text-shadow
CSS属性用于向文本设置阴影。它接受一个阴影的属性值,包括模糊半径、阴影颜色、以及阴影的水平和垂直偏移量。
语法:
text-shadow: h-shadow v-shadow blur-radius color;
h-shadow
(必需):水平阴影的位置。允许负值。v-shadow
(必需):垂直阴影的位置。允许负值。blur-radius
(可选):模糊距离。color
(可选):阴影的颜色。
示例HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Shadow Example</title>
<style>
.shadowed-text {
text-shadow: 2px 2px 4px #000000;
font-size: 36px;
color: #ffffff;
}
</style>
</head>
<body>
<div class="shadowed-text">这是带有阴影的文本</div>
</body>
</html>
在这个例子中,.shadowed-text
类应用了一个阴影,文本颜色设置为白色,阴影颜色为黑色,水平和垂直偏移量都是2px,模糊半径为4px。
评论已关闭