兩箱陰影中相同的元素沒有逗號分隔

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

你不能這樣做兩個單獨的聲明 - 在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 
} 

我不確定這是你想要的，但我希望以任何方式幫助你！

Answer 2

另一種方法做到這一點，使兩個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

編碼愉快:)