同一元素中的两个框阴影，没有逗号分隔

Question

我知道我可以通过以下方式将两个框阴影设置为同一元素：

box-shadow: inset 0 2px 0px #dcffa6,  0 2px 5px #000;

我在页面的不同部分为一个类分配css属性，所以我想知道是否有可能完成同样的任务，分配两次框阴影。类似于：

box-shadow: inset 0 2px 0px #dcffa6;
box-shadow:0 2px 5px #000;

但是，这不起作用，第二个长方体阴影将覆盖第一个长方体。

谢谢。

编辑：

我还尝试将两个类应用于同一个元素，但没有成功：http://jsfiddle.net/DQvyw/

编辑2:

不是一个真正的解决方案，但我最终做到了：http://jsfiddle.net/DQvyw/1/

Answer 1

另一种方法是制作两个div并为每个div提供正确的样式。

.divoutside{
    border-radius: 8px;
    box-shadow: 0px 2px 4px #4D4D4D;
}
.divinside{
    border: 1px solid #4D4D4D;
    border-radius: 8px;
    box-shadow:inset 0 0 2px #FFA500;
        padding: 4px;
}
<div class="divoutside"><div class="divinside"></div></div>

示例：http://jsbin.com/ujuqem/1/edit

快乐编码：）

Answer 2

您不能用两个单独的声明来实现这一点——在CSS中，当您为同一规则定义两个值时，后一个声明会覆盖前一个。然而，使用JavaScript，您可以连接第二个值，而不是用它替换旧值

var el = document.getElementsByClassName("your_class_name");
var n = el.length;
for(var i = 0; i < n; i ++) {
    var cur = el[i];
    cur.style.boxShadow += ", 0 2px 5px #000000"; //notice the comma in the beginning
}

我不确定这是你想要的，但我希望这对你有任何帮助！