웹킷 국경 반경 때로는이 문제는 CSS3 국경 반경 특성에 관한 효과

Question

을 (http://www.css3.info/border-radius-apple-vs-mozilla/)

이 문제의 예는 여기에 있습니다 :

이 URL에서

http://jamtodaycdn.appspot.com/bin/rounded.html

, 나는 반올림 divs는 FF3에서 반올림되는 것으로 나타나지만 Safari와 Chrome에서는 둥근 모서리가 없습니다.

-moz-border-radius-bottomleft:2px; 
-moz-border-radius-bottomright:92px; 
-moz-border-radius-topleft:92px; 
-moz-border-radius-topright:2px; 
-webkit-border-bottom-left-radius: 2px; 
-webkit-border-bottom-right-radius: 92px; 
-webkit-border-top-left-radius: 92px; 
-webkit-border-top-right-radius: 2px; 

나는이 CSS 형식이 올바른지 상당히 확신, 그래서 문제가 무엇인지에 대한 우둔 해요 다음과 같이

스타일이다.

Answer 1

문제는 92px 방사형에있는 것으로 보입니다. 20 픽셀 높이의 div에서 처리 할 수있는 최대 반경은 18 픽셀입니다. 이 경우 반경 92 픽셀의 의미가 반드시 분명하지는 않습니다. . 그러나 당신은 X와 같은 것을 사용하여 Y 반경을 모두 지정할 수 있습니다

이

-webkit-border-bottom-right-radius: 92px 18px; 

(보조 노트, 당신은 여러 HTML 요소에 동일한 ID를 사용하지 말아야을 대신 클래스를 사용하고 CSS를 조정해야합니다 셀렉터이므로 #round 대신 .round를 말합니다.)

Answer 2

다양한 테두리 반경 속성뿐만 아니라 테두리 또는 테두리 폭 속성을 적용 할 필요가 없습니까?

또한 Safari가 특정 반지름 값 이상으로 반지름을 떨어 뜨리는 것을 보았습니다. 픽셀 값을 줄이려고 시도했습니다. & 어떻게되는지보십시오.

Answer 3

둥근 모서리가있는 도움을받는 사람은 누구나 Webkit에 관한 Jacob의 대답에 동의하지만 Chrome에서 작동하지 않는다고 언급 한 질문도 있습니다. Chrome은 표준 CSS3 둥근 모서리를 사용합니다.이 모서리는 Webkit과 유사하지만 앞의 '-webkit-'규칙이 없습니다. 다음과 같이이은 다음과 같습니다

border-bottom-right-radius:2px; 

계정 파이어 폭스, 웹킷과 크롬으로 촬영하려면, 당신은 같은 것을 할 필요 했어 :

-moz-border-radius-topright:3px; 
-moz-border-radius-bottomright:3px; 
-webkit-border-top-right-radius:3px; 
-webkit-border-bottom-right-radius:3px; 
border-top-right-radius:3px; 
border-bottom-right-radius:3px; 

규칙의 세 번째 세트는 CSS3의 규칙입니다 및 지원 Chrome 제공 이것은 또한 CSS3Pie 같은 것을 사용하여 IE에서 둥근 모서리를 얻을 수있는 좋은 방법입니다 http://css3pie.com/

Answer 4

단순형 그냥 사용

border-radius:92px 92px 2px 2px;

여기서

단락 하나에 대해서

border-radius:top right bottom left;