css的text-stroke属性是专门用于给文字添加描边效果的原生属性，属于css字体模块的一部分，能够直接控制文字描边的宽度和颜色，实现起来比以往用text-shadow模拟描边的方式更简单高效。
text-stroke属性的基本语法
text-stroke是一个简写属性，它整合了两个子属性，分别是text-stroke-width和text-stroke-color，基本语法格式如下：
/* 简写形式 */ text-stroke: <宽度> <颜色>; /* 单独设置子属性 */ text-stroke-width: <长度值>; text-stroke-color: <颜色值>;
其中text-stroke-width用来设置描边的粗细，支持px、em、rem等所有css长度单位；text-stroke-color用来设置描边的颜色，支持十六进制、rgb、rgba、颜色名等所有css颜色表示方式。
基础文字描边实现示例
下面是一个最简单的文字描边实现，给黑色文字添加2px的红色描边：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字描边示例</title>
<style>
.stroke-text {
font-size: 48px;
font-weight: bold;
color: #000;
/* 文字描边：2px宽，红色 */
text-stroke: 2px #ff0000;
/* 兼容webkit内核浏览器 */
-webkit-text-stroke: 2px #ff0000;
}
</style>
</head>
<body>
<div class="stroke-text">文字描边效果</div>
</body>
</html>
这里需要注意，text-stroke属性目前还不是所有浏览器都完全支持，webkit内核的浏览器（比如Chrome、Safari）需要加上-webkit-前缀才能正常生效，所以实际使用时建议同时写带前缀和不带前缀的属性。
不同场景的描边效果实现
1. 半透明描边效果
如果希望描边有一定的透明度，可以使用rgba颜色值来设置text-stroke-color：
.transparent-stroke {
font-size: 40px;
color: #fff;
/* 半透明蓝色描边，宽度1.5px */
text-stroke: 1.5px rgba(0, 100, 255, 0.6);
-webkit-text-stroke: 1.5px rgba(0, 100, 255, 0.6);
}
2. 渐变文字加描边
结合background-clip属性可以实现渐变文字加描边的效果，示例代码如下：
.gradient-stroke-text {
font-size: 50px;
font-weight: bold;
/* 设置背景渐变 */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
/* 背景裁剪到文字 */
-webkit-background-clip: text;
background-clip: text;
/* 文字颜色设为透明，显示背景渐变 */
color: transparent;
/* 添加深灰色描边 */
text-stroke: 2px #333;
-webkit-text-stroke: 2px #333;
}
使用注意事项
- text-stroke属性会直接占用文字外部的空间，如果描边宽度过大，可能会让文字看起来过于厚重，甚至影响可读性，建议描边宽度控制在1-3px之间。
- 该属性目前不支持IE浏览器，如果需要兼容IE，还是建议使用text-shadow属性模拟描边效果，不过模拟的效果不如原生属性自然。
- 当文字颜色设置为透明时，描边效果会依然保留，这个特性可以用来实现只有描边没有填充文字的特殊效果。
浏览器兼容性说明
下面是text-stroke属性的主流浏览器支持情况：
| 浏览器 | 支持版本 | 是否需要前缀 |
|---|---|---|
| Chrome | 4.0及以上 | 需要-webkit-前缀 |
| Safari | 3.1及以上 | 需要-webkit-前缀 |
| Firefox | 49.0及以上 | 不需要前缀 |
| Edge | 15.0及以上 | 不需要前缀 |
| IE | 全版本不支持 | 无 |
css_text-stroke文字描边前端样式web开发修改时间：2026-06-28 12:18:26