在网页设计中，为了让文字更具视觉冲击力，我们常常需要给文字添加描边效果。CSS提供了text-stroke属性，能够直接为文字定义描边宽度与颜色，从而避免借助图片或复杂的SVG来实现类似需求。
什么是text-stroke属性
text-stroke是CSS中用于控制文字描边的属性，它其实是text-stroke-width和text-stroke-color两个属性的简写。该属性基于WebKit引擎提出，因此在Chrome、Safari等浏览器中支持较好，标准写法通常需要加上-webkit-前缀。
基本语法与使用示例
我们可以直接在样式规则中书写如下代码，为一个标题添加红色描边：
/* 使用前缀保证兼容性 */
.title {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: red;
/* 简写形式 */
-webkit-text-stroke: 2px red;
font-size: 40px;
color: white;
}
上述代码中，-webkit-text-stroke: 2px red;表示描边宽度为2像素，颜色为红色。文字本身填充为白色，这样就能清晰看到白字红边的效果。
参数详解
text-stroke-width
该值可以为长度单位（如px、em），不能使用百分比。它决定描边的粗细程度。
text-stroke-color
可以使用任意CSS颜色值，如十六进制、rgb、颜色名等。
配合paint-order优化显示
当文字既有填充又有描边时，默认先画填充再画描边，可能导致细字体被描边盖住。使用paint-order可调整绘制顺序：
.optimized {
-webkit-text-stroke: 1px black;
color: yellow;
paint-order: stroke fill;
}
上面代码让浏览器先绘制描边再填充，字形看起来更清晰。
兼容性与替代方案
虽然text-stroke很方便，但在Firefox旧版本和部分移动端内核中支持不完整。如果需要跨浏览器稳定描边，可考虑使用text-shadow模拟，或借助SVG的<text>标签。下表列出常见浏览器支持情况：
| 浏览器 | 支持text-stroke |
|---|---|
| Chrome | 是（需前缀） |
| Safari | 是（需前缀） |
| Firefox | 部分版本原生支持 |
| Edge | 是（需前缀） |
小结
通过text-stroke属性，开发者能用极少量CSS实现文字描边。实际使用时记得加-webkit-前缀，并结合paint-order提升细小文字的可读性。在要求严格兼容的项目中，建议准备好降级方案。
CSStext-stroke文字描边修改时间：2026-07-29 04:00:21