CSS3 的text-shadow实现立体文字和燃烧文字

最新推荐文章于 2025-07-05 21:16:40 发布

追星逐月丶

最新推荐文章于 2025-07-05 21:16:40 发布

阅读量2.4k

点赞数 1

文章标签： html5 css3 text-shadow 文字效果

本文展示了如何使用CSS3的text-shadow属性创建立体和燃烧的文字效果。通过调整阴影偏移、模糊半径和颜色，可以实现不同视觉效果。文中提供两个实例，一个是带有白色和深灰色阴影的立体文字，另一个是呈现火焰燃烧效果的文字。

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

立体文字演示效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
text-align: center;
background: #CCC;
font-size: 40px;
font-weight: bold;
color: #D1D1D1;
text-shadow: -2px -2px white,
2px 2px #333;
}
</style>
</head>
<body>
<p>html5 + css3</p>
</body>
</html>

燃烧效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background: #000;
}
p{
text-align: center;
font-size: 40px;
font-weight: bold;
color: red;
text-shadow: 0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd6,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
</style>
</head>
<body>
<p>html5 + css3</p>
</body>
</html>