Временной эффект пограничного радиуса Webkit

Эта проблема касается свойства border-radius CSS3 (http://www.css3.info/border-radius-apple-vs-mozilla/)

Пример этой проблемы:

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

В этом URL-адресе у меня есть закругленные div, которые, кажется, закруглены в 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 отформатирован правильно, поэтому я не знаю, что это за проблема.

Ответ 1

Проблема заключается в радиусе 92px. Похоже, что максимальный радиус, который может обрабатывать div с 20 пикселями, составляет 18 пикселей. Не обязательно очевидно, что в этом случае означает радиус в 92 пикселя. Однако вы можете указать как радиус X, так и Y, используя что-то вроде этого:

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

(обратите внимание, что вы не должны использовать один и тот же идентификатор для нескольких элементов HTML. Вместо этого вы должны использовать класс и отрегулировать свой селектор CSS, чтобы он указывал .round вместо #round.)

Ответ 2

Для тех, кто ссылается на это для помощи с закругленными углами, я согласен с ответом Джейкоба относительно Webkit, но в вопросе также упоминалось, что Chrome не работает. Chrome использует стандартные скругленные углы CSS3, которые точно так же, как и Webkit, но без предыдущего "-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. Это хороший способ также получить закругленные углы в IE, используя что-то вроде CSS3Pie: http://css3pie.com/

Ответ 3

Вам не нужно применять свойство border или border-width, а также различные свойства border-radius?

Кроме того, я заметил, что Safari отклоняет радиус выше определенных значений радиуса - попробуйте уменьшить значения пикселей и посмотреть, что произойдет.

Ответ 4

простой тип просто использовать:

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

где:

border-radius:top right bottom left;