javascript - 如何使用jQuery(.css)添加多值(以逗号分隔)框阴影？

我的CSS中有一个框阴影为:

.className {

  transform: translateY(0);
  box-shadow:
    inset 0 0 60px whitesmoke,
    inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px #f0f,
    10px 0 80px #0ff;
}

我想使用jQuery INSTEAD应用此阴影(以便以后可以实现动态颜色)。我当前的JavaScript是:

$('.className').css({
            "box-shadow": 'inset 0 0 60px whitesmoke'
            })

这将阴影的一侧毫无问题。当我尝试在CSS中添加用逗号分隔的其他阴影时，什么也没发生。我尝试将所有逗号值添加到一行，如下所示:

$('.className').css({
            "box-shadow": 'inset 0 0 60px whitesmoke, inset 20px 0 80px #f0f,...'
            })

但这没有用。我也尝试使用空格而不是逗号，但这也不起作用。有什么方法可以将这个多逗号值阴影框转换为jQuery的.css可以接受的一个参数？
如果没有，如何将CSS转换为可接受的格式以传递到jQuery的.css方法中？
谢谢。

最佳答案

必须已经犯了语法错误，因为它可以使用逗号方法很好地工作。参见Temani的小提琴:jsfiddle.net/autq9p13
谢谢。