JS box-shadow 参数顺序

Question

我对 css box-shadow 属性的参数顺序有点困惑。

对https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow的订单定义如下：

box-shadow: inset(optional) <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

假设我们有这样的 HTML：

<div style="box-shadow: inset 0px 0px 20px -4px rgb(0,0,0)"></div>

当我打开开发人员工具时，选择上面的 div 元素并执行以下 javascript 为什么要重新排序参数。颜色参数现在位于第一位而不是最后一位。

window.getComputedStyle($0).boxShadow 
"rgb(0, 0, 0) 0px 0px 20px -4px inset"

与$($0).css("boxShadow")相同

Answer 1

MDN 中提到的顺序是正确的。这是为开发人员创建的标准。

话虽如此，您看到的是计算出来的样式。每个浏览器和浏览器引擎的工作方式都不同，它们大多会尝试以他们更好理解的方式组合、规范化或简化您提供的属性，这可以帮助他们更快/优化处理。

您看到的输出实际上与您给出的输入相反。

Answer 2

您可以使用 style["boxShadow"] 或 style.boxShadow。

<div id="foo">12123123</div>

document.getElementById("foo").style["boxShadow"] = "0 0 5px #999999";