CSS text-shadow属性详解

最新推荐文章于 2025-05-08 10:28:50 发布

*TQK*

最新推荐文章于 2025-05-08 10:28:50 发布

阅读量410

点赞数 10

分类专栏： HTML+CSS——网页制作文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/2401_88591507/article/details/146454835

版权

HTML+CSS——网页制作专栏收录该内容

28 篇文章

订阅专栏

text-shadow 是 CSS 中用来给文字添加阴影效果的属性，它的四个属性值可以理解为控制影子的四个特征，用一句话概括就是：影子往哪边偏移、有多模糊、是什么颜色。四个值按顺序排列如下：

text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;

用通俗的例子解释：
假设你拿手电筒照文字，影子会投在桌面上：

水平偏移（正右负左）
→ 影子向左或向右偏移多少。
→ 比如 2px 表示影子向右移动 2 像素，-2px 则向左。

垂直偏移（正下负上）
→ 影子向上或向下偏移多少。
→ 比如 3px 表示影子向下移动 3 像素，-3px 则向上。

模糊半径
→ 影子的模糊程度，数值越大越模糊。
→ 比如 5px 表示影子边缘模糊 5 像素，0 则完全不模糊（清晰锐利）。

颜色
→ 影子的颜色，默认和文字颜色一致。
→ 比如 red 会让影子变成红色，也可以用 #FF0000 或 rgb(255,0,0)。

举个完整例子：

text-shadow: 2px 3px 5px red;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>文本外观属性</title>
	<style type="text/css">
		p{
			font-size: 50px;
			text-shadow:   2px 3px 5px red;
		}
	</style>
</head>
	
<body> 
	<p>HELLO CSS3</p>
</body>

效果展示