为何text-shadow不支持spread-radius？CSS及Flutter场景下的疑问

文本阴影不支持spread-radius的核心原因 #

首先可以明确的是，该设定是CSS规范明确约定的：现行CSS文本装饰模块规范中，text-shadow的语法定义就排除了inset和spread-radius两个参数，和box-shadow的语法做了明确区分。底层原因主要有三点：

• 渲染实现的成本差异
  box-shadow作用于规则的矩形盒边界，spread-radius的本质是将盒路径等比例放大/缩小后再执行模糊计算，逻辑简单性能开销极低。而文本是不规则矢量路径，每个字符都由多段贝塞尔曲线组成，还要处理字符镂空（比如o a类带闭合空白的字符）、笔画交叉区域的路径偏移计算，实现等比例扩展的开销是矩形盒的数倍，在text-shadow被纳入CSS规范的时期，硬件加速还未普及，浏览器无法承担这么高的渲染成本，因此规范制定阶段就直接砍掉了该参数。
• 历史兼容的限制
  text-shadow最早在CSS2标准中就已定义，比CSS3新增的box-shadow早了近10年，属性语法的兼容包袱极重。如果后续新增spread-radius参数，会导致所有不支持该参数的旧版本浏览器直接忽略整行text-shadow声明，引发大面积样式异常，CSS工作组多次讨论后都没有通过新增该参数的提案。
• 需求优先级较低
  文本阴影的主流使用场景为文字投影、外发光效果，这类效果完全可以通过叠加多层不同模糊半径、透明度的text-shadow模拟实现，spread-radius的不可替代性很低，无论是浏览器厂商还是规范制定方，都没有足够的动力为其投入开发资源。

Flutter的同名设计是主动对齐CSS规范的结果，目的是降低前端开发者的学习迁移成本，因此也沿用了text-shadow不含spread-radius的设定。

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