paint-order 在 HTML 表格元素（如 <td>）中完全无效，因 CSS 规范限定其仅作用于 SVG 图形元素；表格文本属 HTML 渲染树，不接入该绘制管线，故浏览器静默忽略，需改用 -webkit-text-stroke、SVG <text> 或 text-shadow 实现描边效果。
paint-order 在 HTML 表格（<table>、<td>、<th>）中完全无效——不是写法问题，是规范禁止。
为什么 paint-order 在 <td> 里不生效
浏览器会静默忽略它。你在 <td style="paint-order: stroke"> 里写了，DevTools 的 Styles 面板能看到该声明，但 Computed 标签页里搜不到 paint-order，渲染也毫无变化。这是因为 CSS 规范明确定义：paint-order 只作用于 SVG 渲染树中的图形元素（如 <text>、<rect>），而 HTML 表格单元格属于 HTML 渲染树，其文本节点根本不接入该绘制管线。
常见误判：看到控制台没报错，就以为生效了；实际必须验证视觉效果——比如描边是否“只露在外侧”、填充是否盖住描边内半边。在 <td> 上永远看不到这种效果。
想在表格里实现“外描边文字”，只能分场景处理
HTML 表格单元格里的文字，没有原生的 paint-order 路径。可行方案只有两个，且不能混用：
立即学习“前端免费学习笔记（深入）”；
- 对现代 WebKit/Blink 浏览器（Chrome、Edge、Safari）：用
-webkit-text-stroke+color控制描边与填充，但描边始终居中，不可偏移，也无法调序 - 对需要高保真“外描边感”（即填充盖住描边内半边）的场景：必须把目标文字抽出来，放进
<svg>容器，用<text>标签重写，并同时设置fill和stroke - 对 Firefox 或需跨浏览器兼容的项目：放弃描边层级控制，改用
text-shadow模拟（4 方向等宽阴影），这是唯一真正通用的方式
-webkit-text-stroke 和 paint-order 能不能一起用
不能。它们互不识别、互不兼容：
-
-webkit-text-stroke只在 HTML 文本上起作用，且仅限 WebKit/Blink 内核；Firefox 完全无视 -
paint-order只在 SVG<text>上起作用；你在 SVG 里写-webkit-text-stroke，浏览器直接忽略（SVG 渲染管线不认这个前缀） - 试图在同一个
<td>里既写-webkit-text-stroke又写paint-order，后者会被静默丢弃，前者可能生效（仅限 Chrome/Safari）
最易被忽略的一点：即使你成功把文字挪进 SVG 并满足所有条件（<svg> + <text> + fill + stroke），如果 stroke-width 小于 2px 或 fill/stroke 对比度太低，paint-order: stroke 带来的“外描边感”肉眼根本看不出差别。
