Webkit Border Radius가 때때로 적용됩니다

Question

이 문제는 CSS3 Border-Radius 속성에 관한 것입니다 (http://www.css3.info/border-radius-apple-vs-mozilla/)

이 문제의 예는 다음과 같습니다.

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

이 URL에서는 FF3에서 둥글게 보이는 DIV를 둥글게했지만 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가 처리 할 수있는 최대 반경처럼 보입니다. 이 경우 92 픽셀 반경이 무엇을 의미하는지는 반드시 분명하지는 않습니다. 그러나 다음과 같은 것을 사용하여 X와 Y 반경을 모두 지정할 수 있습니다.

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

(사이드 참고, 여러 HTML 요소에 동일한 ID를 사용해서는 안됩니다. 대신 클래스를 사용하고 CSS 선택기를 조정하여 #Round 대신 .round라고 표시해야합니다.)

Answer 2

둥근 코너에 대한 도움을 요청하는 사람에게는 WebKit에 대한 Jacob의 답변에 동의하지만 Chrome도 작동하지 않는다고 언급했습니다. Chrome은 WebKit과 똑같은 표준 CSS3 둥근 모서리를 사용하지만 규칙의 이전 '-webkit-'가 없습니다. 이것들은 다음과 같습니다.

border-bottom-right-radius:2px;

Firefox, WebKit 및 Chrome을 고려하려면 다음과 같은 작업을 수행해야합니다.

-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와 같은 것을 사용하여 즉, 둥근 코너를 얻는 좋은 방법입니다. http://css3pie.com/

Answer 3

국경이나 국경비 속성뿐만 아니라 다양한 테두리-라디우스 속성을 적용 할 필요가 없습니까?

또한 Safari가 특정 반경 값 이상 반경을 떨어 뜨리는 것을 발견했습니다. 픽셀 값을 줄이고 어떤 일이 발생하는지 확인하십시오.

Answer 4

간단한 유형 사용 :

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

어디:

border-radius:top right bottom left;