CSS中无text-stroke-width属性,描边粗细须用-webkit-text-stroke简写声明,格式为-width color,顺序不可颠倒;支持px/em/rem单位,但

text-stroke-width 不是标准 CSS 属性
直接写 text-stroke-width: 2px 不会生效。CSS 中没有这个独立属性。描边粗细必须和 -webkit-text-stroke 一起使用,作为其第二个参数(颜色之后)。
-webkit-text-stroke 的语法和参数顺序
-webkit-text-stroke 是一个简写属性,格式为:-webkit-text-stroke: 。顺序不能颠倒,否则浏览器会忽略整个声明。
- 只写颜色(如
-webkit-text-stroke: #000):宽度默认为0,实际无描边 - 只写宽度(如
-webkit-text-stroke: 2px):颜色默认为currentcolor,但部分旧版 Safari 可能不兼容 - 推荐写全:例如
-webkit-text-stroke: 1.5px #333
-webkit-text-stroke: 2px rgba(0, 0, 0, 0.8);
描边粗细单位与精度限制
text-stroke 支持 px、em、rem,但注意:
- 小于
1px(如0.5px)在多数浏览器中会被向下取整为0,即消失 -
em值基于当前元素的font-size,不是父元素,容易误判 - Safari 15.4+ 开始支持小数像素(如
1.2px),但 iOS 15.2 及更早版本仍四舍五入到整数
替代方案:用 text-shadow 模拟描边粗细
当需要更可控的“伪描边”或兼容不支持 -webkit-text-stroke 的环境(如某些 Electron 版本),可用 text-shadow 手动展开 8 方向描边:
立即学习“前端免费学习笔记(深入)”;
text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, -1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000;
这种写法本质是固定偏移,无法真正缩放;若需“2px 描边”,就得把所有偏移量改成 ±2px,且性能略低于原生 -webkit-text-stroke。
1px 描边可能视觉上“断续”或“消失”,这时候得配合 transform: scale(1.001) 或换用 SVG 文字。











