如何使用 CSS 在文本上应用阴影效果?
cssweb developmentfront end technology更新于 2025/1/24 2:20:17
我们可以使用 CSS 提供的"text-shadow"属性在文本元素上应用阴影效果。"text-shadow"属性接受一个值列表，该列表表示阴影相对于元素的 X 和 Y 偏移量、阴影的模糊半径以及阴影的颜色。这些值的语法如下:-
语法
text-shadow: offset_y offset_x blur-radius color
这些值及其含义如下:-
Offset-x - 表示阴影在水平方向上与元素的距离
Offset-y - 表示阴影在垂直方向上与元素的距离
Blur radius - 表示阴影的不透明度
Color - 表示阴影的颜色
示例 1
在此示例中，我们将在"h3"元素上应用阴影效果，给阴影一个 y 轴偏移量以及红色
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Apply Shadow Effect on Text Using CSS?</title>
<style>
h3 {
text-shadow: 0 15px 0 red;
}
</style>
</head>
<body>
<h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>
示例 2
在此示例中，我们将在"h3"元素上应用阴影效果，并赋予阴影 y 轴偏移、x 轴偏移、不透明度和绿色。
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Apply Shadow Effect on Text Using CSS?</title>
<style>
h3 {
text-shadow: 10px 15px 5px green;
}
</style>
</head>
<body>
<h3>How to Apply Shadow Effect on Text Using CSS?</h3>
</body>
</html>
总结
在本文中，我们学习了"text-shadow"属性，并通过两个不同的示例，使用 CSS 为文本元素应用了阴影效果。第一个示例中，我们应用了"红色"的垂直阴影效果;第二个示例中，我们应用了"绿色"的垂直和水平阴影效果，模糊半径为 5px。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
