Chrome의 상자 그림자 및 경계 반경 버그

Question

저는 CSS3를 실험 해본 결과 이상한 것을 발견했습니다.

alt text http://i47.tinypic.com/j8egp5.png

그러나 크롬은 국경 밖에서 그림자를 렌더링 :

border:#446429 solid 1px; 
border-radius:15px; 
-moz-border-radius:15px; 
-webkit-border-radius:15px; 
box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset; 
-moz-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset; 
-webkit-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset; 

오페라와 파이어 폭스의 렌더링 같은 완벽한됩니다 Heres는 DIV 스타일의 일부이다

alt text http://i45.tinypic.com/5doykw.png

그것은 그렇게되어야 하는가 아니면 내가 중요한 것을 놓쳤는가?

Answer 1

이 알려진 버그 다음과 같습니다

http://code.google.com/p/chromium/issues/detail?id=29427

체크 아웃 버그 토론을, 당신이 해결 방법을 찾을 수 있습니다. 이 버그를 빨리 해결하려면이 버그에 별표를 표시하십시오!

Answer 2

시도해보십시오.이 -webkit-box-shadow를 사용하십시오 : inset 0px 0 7px rgba (255, 242, 94, 0.4); rgba를 사용하여 문제를 해결하는 것 같습니다.

행운을 빈다.

Answer 3

내가 본 유일한 해결 방법은 그림자가있는 요소에 테두리를 놓고 그 테두리를 그림자 확산보다 넓게 만드는 것입니다. 이 같은 삽입 된 그림자 그래서 :

box-shadow:inset 0 0 7px #000; 

당신은 다음과 같이 테두리를 추가해야합니다 :

border:solid 7px #fff; 

그것은 당신이 일치 할 필요 상자 그림자 선언에서 세 번째 숫자입니다 (또는 초과). 요소에 큰 뚱뚱한 오래된 테두리를 원하지 않는다면, 테두리 뒤의 배경과 테두리를 똑같이 만들 필요가 있습니다. 따라서이 해결 방법은 요소가 패턴이있는 이미지 또는 그라디언트 위에있는 경우에는별로 도움이되지 않습니다. 그러나 단색의 색상에서는보기 흉하게 작동합니다.

Answer 4

좋은 소식! 고치는 것 같아요. 해결 된/수정 된 것으로 표시된 WebKit Bugzilla의 티켓은 다음과 같습니다. https://bugs.webkit.org/show_bug.cgi?id=41576

다음은 WebKit의 Trac에서 트렁크 커밋입니다. http://trac.webkit.org/changeset/74089

Answer 5

방금 ​​문제가 발견되었지만 추가 마크 업이 필요합니다. 둥근 모서리와 내부 그림자가있는 요소를 같은 둥근 모서리와 숨겨진 다른 컨테이너에 넣어야합니다. 테두리 수정 상기 발표

<div class="foo"><div>Hello!</div></div> 
<style type="text/css"> 
    .foo {-webkit-border-radius: 10px; overflow: hidden;} 
    .foo div {-webkit-border-radius: 10px; -webkit-box-shadow: inset 1px 1px rgba(50%, 50%, 50%, .5);} 
</style> 

테두리 반경 충돌 및 (때문에 테두리 색상) 요소 아래 배경 이미지 incompartible이다.

감사합니다.

Answer 6

음수 값을 사용하면 나를 위해 문제가 해결되었습니다.

-webkit-border-radius:10px; 
-webkit-box-shadow: -1px -1px 2px #CCC; 

Answer 7

이 버그는 최신 카나리아 빌드에서 수정되었습니다.:)

Answer 8

배경과 같은 색 인 삽입 그림자를 먼저 넣는 것은 페이지에 추가 마크 업을 넣지 않고도 잘 작동하는 것 같습니다.

예. 당신은 흰색 배경 페이지가 있다면 :

-webkit-box-shadow:1px 1px 1px #fff inset,0px 0px 5px #333 inset; 

Answer 9

베스 Fauld의 솔루션은 거의 다음과 같이 단지 약간의 실수가,이 보일 것입니다 작동

:

#fff은 배경색이

-webkit-box-shadow:1px 1px 0px 1px #fff inset, 0px 0px 5px #333 inset; 

(상자 바깥 쪽), # 333은 음영 색입니다.

-webkit-box-shadow의 세 번째 값은 흐림 크기를 정의하는 반면 네 번째는 그림자 (불투명) 크기를 정의하므로 후자는 1px로 설정되어야합니다.