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

Question

我知道我可以通过这种方式为同一个元素设置两个框阴影:

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

我正在将 css 属性分配给页面不同部分的一个类，所以我想知道是否有可能完成同样的工作，分配两次 box-shadow。像这样的东西:

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

快乐编码:)