CSS 상자 그림자가 이상한 흰색 영역을 보여 줍니까?

다음 코드는 모든 이미지에 잘 적용되지만, html5 캔버스 컨테이너에서 실제 그림자 앞에 이상한 흰색 영역이 표시 될 때 사용합니다.CSS 상자 그림자가 이상한 흰색 영역을 보여 줍니까?

CSS :

#container{ 
    width: 500px; 
    border-top-left-radius: 2px; 
    border-top-right-radius: 2px; 
    border-bottom-right-radius: 2px; 
    border-bottom-left-radius: 2px; 
    margin: 0px; 
    padding: 0px; 
    -webkit-box-shadow: 0 8px 6px -6px black; 
     -moz-box-shadow: 0 8px 6px -6px black; 
      box-shadow: 0 8px 6px -6px black; 
}

HTML :

<div id="container"></div>

결과 : http://i.imgur.com/0uk5yVQ.png

사람이이 문제를 해결하는 방법을 알고 있나요? 나는 원래의 코드를 가지고 갔다. http://css-tricks.com/snippets/css/css-box-shadow/

출처

2013-09-03 Jonas Kaufmann

검사 : //jsfiddle.net/tFUPU/는 .. 그림자를 제거하고 볼 ... 당신은 내가 그림자를 유지하려는 선명한 이미지 –

@Ganesh를 얻을 것이다 하지만 이상한 공백을 유지하고 싶지는 않습니다. –

다음 컨테이너의 너비를 변경해야합니다 ... 너비와 높이를 자신의 이미지 크기로 설정해야합니다. –

이미지는 기본적으로 인라인이기 때문에 발생한다. display: block;을 추가하면 공백이 사라집니다. 같은 (here..http에서 http://jsfiddle.net/skip405/tFUPU/2/

#container img { 
    display: block; 
}

출처

2013-09-03 14:05:31 skip405

CSS 상자 그림자가 이상한 흰색 영역을 보여 줍니까?

답변

관련 문제