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;

然而，这不起作用，第二个box-shadow会覆盖第一个box-shadow。

感谢。

修改

我也尝试将两个类应用于同一个元素，但没有运气：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
}

我不确定这是你想要的，但我希望以任何方式帮助你！

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

2 个答案: