Css3 ---- 文字阴影效果_文本阴影的先后顺序为-优快云博客

本文链接：https://blog.youkuaiyun.com/Cg_Companion_Xi/article/details/105596546

本文介绍了CSS3的text-shadow属性，用于创建文字阴影效果。内容包括：阴影的位置（水平和垂直位移）、模糊半径的调整、如何给文字描边并设置透明颜色、应用多个阴影以及创建特殊效果如燃烧和浮雕效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文字阴影 text-shadow
text-shadow属性值的顺序：
text-shadow: 水平阴影位置，垂直阴影位置，模糊半径，阴影颜色;
例如：

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	    <style>
	        p{
	            margin: 0;
	            font-family: helvetica,arial,sans-serif;
	            color: #999;
	            text-align: center;
	            font-size:80px;
	            font-weight:bold;
	            text-shadow:10px 10px #333;   
	        }
	    </style>
	</head>
	<body>
	    <p>Text Shadow</p>
	</body>
	</html>

效果如下：
在这里插入图片描述
通过控制水平位移和垂直位移可以控制阴影偏向，正值偏右偏下。负值偏左偏上。（正值则向 X轴，Y轴正方向偏移）,（负值则向 X轴，Y轴负方向偏移）。
改变 x和y 的值：

   text-shadow:-10px -10px #333;

在这里插入图片描述
现在加上模糊半径，可以修改模糊半径来控制阴影的模糊程度：

 text-shadow:10px 10px 10px red;

在这里插入图片描述
还可以给文字描边，且设置文字的颜色为透明色

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	    <style>
	        p{
	            margin: 0;
	            font-family: helvetica,arial,sans-serif;
	            color: #999;
	            text-align: center;
	            font-size:80px;
	            font-weight:bold;
	            text-shadow:10px 10px 10px red;  
	            /* 设置为透明色 */
	            color: transparent;
	            /* 给文字描边 */
	            -webkit-text-stroke: 3px #f00;
	        }
	    </style>
	</head>
	<body>
	    <p>Text Shadow</p>
	</body>
	</html

在这里插入图片描述
也可以定义多个阴影用逗号隔开：

text-shadow:20px 50px 10px violet,
            30px -10px 10px red,
           -40px 20px 10px #006;

在这里插入图片描述
还可以来文字添加一点别的效果，比如燃烧：
改变一下阴影的位置就能实现

   text-shadow:0 0 4px #fff,
              0px -5px 4px #ff3,
              2px -10px 6px #fd3,
             -2px -15px 11px #f80,
              2px -25px 18px #f20;

在这里插入图片描述
也可以做浮雕效果：

	color: #d1d1d1;
	text-shadow:-1px -1px #fff,
	             1px 1px #333;

在这里插入图片描述