为何CSS无text-outline属性？求文字描边更优实现方案

确实，曾经有过text-outline的早期提案，但后来被废弃并整合到了text-stroke的规范方向中，所以目前没有正式的text-outline属性可用，这点确实挺让人遗憾的。不过现在有几种比纯text-shadow更简洁的实现方式：

1. 使用-webkit-text-stroke（主流浏览器支持） #

这是目前最接近你期望的text-outline的写法，虽然带webkit前缀，但Chrome、Safari、Edge等主流浏览器都已支持，写法非常简洁：

.stroked-text {
  -webkit-text-stroke: 2px #000;
  /* 为不支持的浏览器添加降级方案 */
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, 2px 2px 0 #000, -2px 2px 0 #000;
}

需要注意：如果文字没有设置color（或设为透明），-webkit-text-stroke只会显示描边；如果有填充色，描边会在填充色外侧渲染。目前CSS工作组正在推进标准的text-stroke属性，但暂时只有带前缀的版本可用。

2. 优化text-shadow写法（全浏览器兼容） #

如果需要兼容所有浏览器，你可以用CSS变量简化原有的text-shadow代码，让维护更方便：

.stroked-text {
  --stroke-width: 2px;
  --stroke-color: #000;
  text-shadow: 
    calc(-1 * var(--stroke-width)) calc(-1 * var(--stroke-width)) 0 var(--stroke-color),
    var(--stroke-width) calc(-1 * var(--stroke-width)) 0 var(--stroke-color),
    var(--stroke-width) var(--stroke-width) 0 var(--stroke-color),
    calc(-1 * var(--stroke-width)) var(--stroke-width) 0 var(--stroke-color);
}

这样后续要调整描边宽度或颜色时，只需要修改变量值即可，不用重复修改四处阴影的参数。

另外补充一点：如果需要更粗的描边，text-shadow可能会出现边缘模糊的问题，这时候-webkit-text-stroke的效果会更清晰，因为它是真正的矢量描边，而text-shadow是模拟的像素阴影叠加。

内容的提问来源于stack exchange，提问作者Frandezo