为什么Chrome Dev Tools提示transform-box部分取值为无效属性值？

transform-box属性值无效的核心原因 #

transform-box的不同合法值有明确的适用元素范围，并非所有取值都能在任意类型的元素上生效，无效提示对应三种不同场景：

• content-box、border-box仅支持在HTML元素上使用，若在SVG元素上设置这两个值，Chrome会直接判定为非法属性值，触发DevTools的无效提示。如果在HTML元素上设置也出现报错，可以检查Chrome版本是否低于98，Chrome从98版本才开始完整支持这两个针对HTML元素的取值，更低版本仅支持SVG相关的属性值。
• stroke-box目前仅存在于CSS规范的定义中，所有主流浏览器都没有完成落地实现，无论在哪类元素上设置都会被识别为无效属性值。

补充说明 #

其余两个合法值的适用范围如下：

• fill-box仅支持在SVG元素上使用
• view-box是SVG元素的默认取值，也可以在HTML元素上生效，会以元素所在的最近视口作为变换参考盒。

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