2

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

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 会覆盖第一个。

谢谢。

编辑：

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

编辑2：

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

4

2 回答 2

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

快乐编码:)

于 2013-02-03T04:00:18.367 回答
0

你不能用两个单独的声明来做到这一点——在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
}

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

于 2012-08-25T11:13:36.083 回答