CSS3 text-shadow属性怎么用？实例讲解火焰文字效果实现方法

CSS3的text-shadow属性是专门用来给文字添加阴影效果的内置属性，通过调整阴影的偏移、模糊半径和颜色，能实现从简单阴影到复杂特效的多种效果，火焰文字就是其中比较经典的应用场景。

text-shadow属性基础语法

text-shadow的语法格式为：text-shadow: h-shadow v-shadow blur color;，各个参数的含义如下：

• h-shadow：水平阴影偏移量，正值向右偏移，负值向左偏移，单位为px、em等CSS长度单位，必填参数。
• v-shadow：垂直阴影偏移量，正值向下偏移，负值向上偏移，单位为px、em等CSS长度单位，必填参数。
• blur：阴影模糊半径，值越大阴影越模糊，0表示没有模糊，单位为px等CSS长度单位，可选参数。
• color：阴影的颜色，支持所有CSS颜色表示方式，可选参数，默认和文字颜色一致。

如果需要添加多个阴影，可以用逗号分隔多组参数，比如text-shadow: 1px 1px 2px #000, 3px 3px 4px #666;就会给文字添加两层不同的阴影。

火焰文字效果实现思路

火焰文字的核心是用多层不同颜色、不同偏移和模糊度的阴影模拟火焰的层次感，通常从内到外分为亮黄色核心、橙色中层、红色外层，还可以添加轻微的动态效果让火焰看起来更真实。

静态火焰文字实现

先实现基础的静态火焰效果，通过调整多层阴影的参数模拟火焰的颜色过渡：

/* 火焰文字基础样式 */
.fire-text {
    font-size: 80px;
    font-weight: bold;
    color: #fff; /* 文字本身设为白色，作为火焰最亮的核心 */
    /* 多层阴影模拟火焰层次：从内到外依次是亮黄、橙、红 */
    text-shadow:
        0 0 4px #fff, /* 最内层亮白光晕 */
        0 0 10px #ff0, /* 亮黄色内层火焰 */
        0 0 20px #ff9900, /* 橙色中层火焰 */
        0 0 30px #ff3300, /* 红色外层火焰 */
        0 0 40px #cc0000; /* 最外层深红火焰边缘 */
    text-align: center;
    margin: 50px auto;
}

对应的HTML结构很简单，只需要一个元素包裹文字即可：

<div class="fire-text">火焰文字</div>

动态火焰效果优化

静态火焰看起来比较生硬，我们可以添加CSS动画让阴影的参数轻微变化，模拟火焰跳动的效果：

/* 动态火焰动画 */
@keyframes fire-flicker {
    0%, 100% {
        text-shadow:
            0 0 4px #fff,
            0 0 10px #ff0,
            0 0 20px #ff9900,
            0 0 30px #ff3300,
            0 0 40px #cc0000;
    }
    50% {
        text-shadow:
            0 0 6px #fff,
            0 0 12px #ff0,
            0 0 22px #ff9900,
            0 0 32px #ff3300,
            0 0 42px #cc0000;
    }
}

.fire-text-dynamic {
    font-size: 80px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin: 50px auto;
    animation: fire-flicker 0.8s infinite alternate; /* 0.8秒循环，交替播放 */
}

对应的HTML只需要修改class即可：

<div class="fire-text-dynamic">动态火焰文字</div>

注意事项

使用text-shadow实现火焰效果时，需要注意阴影的层数不要过多，否则会影响页面渲染性能，一般3-5层就能达到比较好的效果。另外颜色的选择要符合火焰的自然过渡，从亮到暗的层次要清晰，模糊半径也要逐层增大，才能模拟出真实的火焰质感。

CSS3text-shadow文字特效火焰文字修改时间：2026-06-03 03:23:05