HTML5如何设置文字描边粗细_textstrokestrokewidth调整说明【操作】

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。

描边粗细看似只是改个数字，但实际受浏览器解析逻辑、单位精度、甚至渲染管线影响——尤其在 Retina 屏或 zoom 缩放时，1px 描边可能视觉上“断续”或“消失”，这时候得配合 transform: scale(1.001) 或换用 SVG 文字。