박스 섀도우가 잘립니다.

Question

CSS3의 box-shadow을 사용하는 동안 일반적으로 발생하지 않는 문제가 있습니다.

상자 그림자는 일반적으로 div 가장자리를 통해 흐려 지지만이 가장자리는 흐려지지 않습니다.

은 상단과 오른쪽에 차단되고

box-shadow ..

가 Heres는 내가 상자 그림자에 사용하고있어 CSS :

-moz-box-shadow: 0 0 5px #555; 
-webkit-box-shadow: 0 0 5px #555; 
box-shadow: 0 0 5px #555; 

환호가

Answer 1

차단되고, overflow:visible이 당신의 요소에 포함되는 모든 사업부 (들)에 설정되어 있는지 확인한다 box-shadow합니다.

Answer 2

문제는 귀하의 센터 메인 div 그림자의 가장자리에서 자르기입니다. 여기에 overflow:visible을 설정하면 표시됩니다.

Answer 3

올바르게 쇼 그림자 상자

.img{ 
    margin:20px; 
-moz-box-shadow: 0 0 5px #555; 
    -webkit-box-shadow: 0 0 5px #555; 
    box-shadow: 0 0 5px #555; 
} 

이 스타일 img 태그를 설정할 수 있습니다

Answer 4

IE로 여러 번이 문제가 발생했습니다. 가장 좋은 해결책은 div 주위에 투명 한 윤곽선을 사용하는 것입니다. 이것은 Gecko와 Webkit이없는 경우에도 IE가 상자 그림자를 자르지 못하게합니다. 이 문제를 해결하기 위해 외곽선을 사용하는 것이 가장 좋은 점은 div의 위치에는 영향을 미치지 않는다는 것입니다. 절대 바닥 : -30px 상위 DIV에 특정 장소에 대하여 넣어

예를 들어, 난 위치를 사용했다있는 사업부 있었다. IE와 IE만이 상자 그림자의 상단과 하단을 잘라 버리고있었습니다. 이 외곽선을 추가하면 위치를 변경하지 않고 고정되었습니다.

outline: 10px solid transparent;