투명 테두리 CSS3 배경 클립이 작동하지 않습니다.

Question

CSS-Tricks에서 transparent border tutorial을 따르고 있습니다. 그러나 내 코드는 테두리를 투명하게 렌더링하지 않습니다. 내 코드 (내 눈에)가 올바르게 보인다.

하십시오 see this fiddle

#popup { 
    position: fixed; 
    top: 20px; 
    right: 20px; 
    width: 300px; 
    border: 20px solid rgba(0,0,0,0.3); 
    border-radius: 20px; 

    -moz-background-clip: padding; 
    -webkit-background-clip: padding; 
    background-clip: padding-box;  

    padding: 10px; 
    margin: 20px; 
    background: white; 
}​ 

당신은 그들이 어떤 이중 포장 사업부 트릭을 필요로하지 않는 CSS 트릭 example page에 볼 수 있습니다

. 그들은 div 배경을 흰색으로, 테두리를 투명으로 설정하고 패딩의 클립 영역을 지정합니다.

Answer 1

스왑의 순서 background 및 border-color 참조 : [? 왜 배경 클립을 사용할 수없는 것]

http://jsfiddle.net/efortis/26795/4/