-webkit-box-shadow使用javascript无法正常更改

Question

我有以下代码:

var oneHeight = Math.ceil(0.012*window.innerHeight).toString()+"px";
var usboxshadow="0px "+oneHeight+" 0px rgba(0,140,255,1), 0px "+oneHeight+" 25px rgba(0,0,0,.7)";
console.log(usboxshadow);
$(".unselected").css("-webkit-box-shadow",usboxshadow);

当我将usboxshadow输出到控制台时,我得到了我应该得到的:

0px 20px 0px rgba(0,140,255,1), 0px 20px 25px rgba(0,0,0,.7) 

(-webkit-box-shadow属性)
但是,当我用Jquery.css()检索属性时,

console.log($(".unselected").css("-webkit-box-shadow"));

我得到了一个非常不同的结果:

rgb(0, 140, 255) 0px 20px 0px 0px, rgba(0, 0, 0, 0.701961) 0px 20px 25px 0px 

首先,每个参数中额外的0px来自何处？

第二,为什么rgba alpha(不透明度)为0.701961,何时应为0.7？

请告诉我我做错了什么.

编辑:

运行代码后,不显示未选择类的元素的box-shadow .

Answer 1

[更新了第二个问题，见底部。]

box-shadow1) 在 CSS 中，您可以使用两个、三个或 for 像素值来指定。前两个是x,y 偏移量，另外两个是扩展值和半径。请参阅MDN 了解更多信息。

当您设置 CSS 规则（使用 CSS 或 jQuery）时，浏览器会自动输入完整值（在本例中为四个px值）。这就是为什么在使用 jQuery 进行定位时会得到额外的一个：最后一个是由浏览器默认行为给出的（请参阅Chrome 检查器中的计算面板：它显示您不必设置的值，因为它们是默认值）。

2) .7或.701961差别不大。我认为你的代码看起来不错，但有时，浮点数（=小数）中可能存在转换问题。我认为，计算机存储十进制数的方式可能会根据各种复杂的标准而有所不同。请参阅StackOverflow 上的此主题。

我认为你不应该担心这一点。也许有一种方法可以在 JS 或 jQuery 中强制进行正确的转换。不能透露更多。

希望我能帮忙。:)

更新

这是JS Fiddle的实验（比我对此答案的评论更新的版本）。问题来自于var oneHeight = Math.ceil(0.012*window.innerHeight).toString()+"px";

我没有太注意它（抱歉），但window.innerheight返回的是Window的高度。因此，阴影的y 偏移量将根据浏览器窗口大小而变化。这就是为什么我们得到了非常不同的阴影。

再说一次，我对小数问题没有其他解释。^^