테두리 반경 및 상자 그림자가 올바르게 렌더링되지 않습니다.

Question

웹 페이지에서 상자 그림자 및 테두리 반경을 함께 사용하려고하며 반경이있는 공간을 채우는 흰색 이미지를 표시하고 있습니다. 그림자가있는 포토샵에서 "투명한"이미지, jpg 또는 png-8 파일로 안전하다고 생각하십시오.

다음은 내가 의미하는 바를 보여주는 이미지입니다.

http://i.imgur.com/jDpIH.png

을 (내가 아직 이미지를 게시하지 못할, 그러나 여기 링크입니다) 나는이 문제를 해결할 수있는 방법이 있는지

.whole 
{ 
width: 1000px; 
margin: 0 auto; 
-webkit-box-shadow: 0px 3px 5px 2px #000000; 
-mox-box-shadow: 0px 3px 5px 2px #000000; 
box-shadow: 0px 3px 5px 2px #000000; 
} 


.top 
{ 
height: 120px; 
background-color: #1F1209; 
margin-top: 50px; 
-webkit-border-top-left-radius: 10px; 
-webkit-border-top-right-radius: 10px; 
-moz-border-radius-topleft: 10px; 
-moz-border-radius-topright: 10px; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px; 
} 

.footer 
{ 
height: 250px; 
background-color: #834C24; 
-webkit-border-bottom-right-radius: 10px; 
-webkit-border-bottom-left-radius: 10px; 
-moz-border-radius-bottomright: 10px; 
-moz-border-radius-bottomleft: 10px; 
border-bottom-right-radius: 10px; 
border-bottom-left-radius: 10px; 
} 

그래서 누구나 알고 있나요 내 CSS로 이것을 사용하고 ? 그건 그렇고, 파이어 폭스와 IE에서 일어난 일입니다. 나는 다른 브라우저에서 그것을 체크 아웃 할 수 있었다.

저는 포토샵 이미지를 사용하지 않는 것이 좋습니다 ... CSS3를 반드시 사용해야합니다.

이 문제에 대한 의견이 있으십니까? 어떤 도움을 주셔서 감사합니다! :)

시간 내 주셔서 감사합니다.

Answer 1

약간의 팁

사용 당신이 그렇게하면 쉬울 것 대신

border-radius:0px 0px 0px 0px; 

<!-- [top left] [top right] [bottom right] [bottom left] --> 

- 왼쪽 -right- 최고

을 추가 바로 가기이 CSS3합니다.

박스 섀도우 ... 왜 그런지는 모르겠지만이 코드를 사용하면 완벽하게 작동합니다. 이 코드는 IE에서 작동 만약 내가 IE 브라우저를 사용하지 않기 때문에

box-shadow:0px 0px 10px black; 

<!-- in case you don't know ... [x coordinate] [y coordinate] [size of shadow] [color] --> 

글쎄, 나도 몰라 내 컴퓨터가 갑자기 어쨌든 ... 조금하지만 대한 중단됩니다.

클래스 CSS 코드 중 하나를 다시 작성하고 올바르게 작동되기를 바랍니다.

.footer 
{ 
    height: 250px; 
    background-color: #834C24; 
    border-radius:10px 10px 10px 10px; 
    box-shadow:0px 0px 50px black; 
} 

-webkit- 및 -moz-를 넣지 않아도 Mozilla와 Chrome에서 읽는다고 생각합니다. IE에서도 작동하길 바랍니다.

어쨌든 ... 그게 전부입니다. 희망은 그 작동합니다.

Answer 2

border-radius 속성은 CSS3 속성이기 때문에 IE9 +, Firefox 4 이상, Chrome, Safari 5 이상 및 Opera에서 지원됩니다.구문 :

border-radius: 1-4 length|%/1-4 length|%; 

예 1

border-radius:2em; 

은 동일하다 :

border-top-left-radius:2em; 
border-top-right-radius:2em; 
border-bottom-right-radius:2em; 
border-bottom-left-radius:2em; 

예 2

border-radius: 2em 1em 4em/0.5em 3em; 

은 다음과 같습니다.

border-top-left-radius: 2em 0.5em; 
border-top-right-radius: 1em 3em; 
border-bottom-right-radius: 4em 0.5em; 
border-bottom-left-radius: 1em 3em; 

Answer 3

컨테이너와 관련된 배경색이있을 수 있습니다.