css怎么设置字体白色描边

在CSS中实现字体白色描边，最常用且兼容性较好的方式是使用text-shadow属性，也可以通过text-stroke属性实现，不同方案有不同的适用场景。

使用text-shadow实现白色描边

text-shadow是CSS中用于给文字添加阴影的属性，通过给文字四周添加多个白色阴影，就能模拟出描边的效果。这种方式兼容性很好，支持绝大多数现代浏览器和旧版本浏览器。

基础实现代码

给文字添加1px宽的白色描边，示例代码如下：

/* 给类名为text-white-stroke的元素添加白色描边 */
.text-white-stroke {
    color: #333; /* 文字主体颜色 */
    text-shadow: 
        -1px -1px 0 #fff,  /* 左上角阴影 */
        1px -1px 0 #fff,   /* 右上角阴影 */
        -1px 1px 0 #fff,   /* 左下角阴影 */
        1px 1px 0 #fff;    /* 右下角阴影 */
}

上面的代码中，四个方向的阴影分别覆盖文字的四个边角，0是阴影模糊半径，设置为0可以让阴影边缘清晰，模拟出描边的硬边效果。#fff就是白色的十六进制颜色值。

调整描边宽度

如果需要更宽的描边，只需要调整阴影的偏移值和增加更多方向的阴影即可。比如要实现2px宽的白色描边：

.text-white-stroke-2px {
    color: #333;
    text-shadow: 
        -2px -2px 0 #fff,
        -2px -1px 0 #fff,
        -2px 0 0 #fff,
        -2px 1px 0 #fff,
        -2px 2px 0 #fff,
        2px -2px 0 #fff,
        2px -1px 0 #fff,
        2px 0 0 #fff,
        2px 1px 0 #fff,
        2px 2px 0 #fff,
        0 -2px 0 #fff,
        0 2px 0 #fff,
        -1px -2px 0 #fff,
        -1px 2px 0 #fff,
        1px -2px 0 #fff,
        1px 2px 0 #fff;
}

描边越宽，需要添加的阴影数量就越多，才能覆盖所有边缘区域，避免描边出现断裂。

使用text-stroke属性实现白色描边

CSS3提供了专门的text-stroke属性用于设置文字描边，语法更简洁，但是兼容性稍差，不支持IE浏览器。

基础实现代码

使用text-stroke实现白色描边的示例：

.text-stroke-white {
    color: #333; /* 文字填充颜色 */
    -webkit-text-stroke: 1px #fff; /* 兼容webkit内核浏览器 */
    text-stroke: 1px #fff; /* 标准属性 */
}

text-stroke的第一个参数是描边宽度，第二个参数是描边颜色，这里直接设置颜色为#fff即可实现白色描边。需要注意添加-webkit-前缀兼容webkit内核的浏览器。

两种方案对比

两种实现方式的特点对比如下：

注意事项

• 使用text-shadow实现描边时，如果描边宽度较大，一定要覆盖所有方向的阴影，否则会出现描边不完整的情况。
• text-stroke会覆盖文字的填充颜色吗？不会，text-stroke只是添加描边，文字本身的color属性还是控制填充颜色，两者可以独立设置。
• 如果背景是动态变化的，白色描边在浅色背景下可能看不清，需要根据实际背景调整描边颜色。

提示：如果只需要简单的白色描边，且不需要兼容IE浏览器，优先选择text-stroke方案，代码更简洁易维护。

CSStext-shadow字体描边白色描边修改时间：2026-06-26 17:24:27