JS box-shadow 参数顺序
JS box-shadow arguments order
我对 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>
当我打开开发人员工具时，select 在 div 元素上方并执行以下 javascript 为什么参数被重新排序。颜色参数现在位于第一位而不是最后一位。
window.getComputedStyle([=12=]).boxShadow
"rgb(0, 0, 0) 0px 0px 20px -4px inset"
同$([=13=]).css("boxShadow")
您可以使用样式["boxShadow"]或style.boxShadow。
<div id="foo">12123123</div>
document.getElementById("foo").style["boxShadow"] = "0 0 5px #999999";
MDN中提到的顺序是正确的。这是供开发人员使用的标准。
也就是说，您看到的是计算样式。每个浏览器和浏览器引擎的工作方式都不同，它们大多会尝试以一种它们更容易理解的方式组合、规范化或简化您提供的属性，这有助于它们的处理 faster/optimal.
您看到的输出实际上是您输入的相反结果。
我对 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>
当我打开开发人员工具时，select 在 div 元素上方并执行以下 javascript 为什么参数被重新排序。颜色参数现在位于第一位而不是最后一位。
window.getComputedStyle([=12=]).boxShadow
"rgb(0, 0, 0) 0px 0px 20px -4px inset"
同$([=13=]).css("boxShadow")
您可以使用样式["boxShadow"]或style.boxShadow。
<div id="foo">12123123</div>
document.getElementById("foo").style["boxShadow"] = "0 0 5px #999999";
MDN中提到的顺序是正确的。这是供开发人员使用的标准。
也就是说，您看到的是计算样式。每个浏览器和浏览器引擎的工作方式都不同，它们大多会尝试以一种它们更容易理解的方式组合、规范化或简化您提供的属性，这有助于它们的处理 faster/optimal.
您看到的输出实际上是您输入的相反结果。