두 박스 그림자 내가 같은 요소에 이러한 방법으로 두 박스 그림자를 설정할 수 있습니다 알고

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

해피 코딩 :) 단지 CSS와 해결 방법이 있다면