Радиус границы Webkit иногда вступает в силу

Question

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

Пример этой проблемы находится здесь:

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

В этом URL-адресе у меня есть закругленные разделы, которые кажутся закругленными в 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.Похоже, что максимальный радиус, который может обрабатывать div высотой 20 пикселей, равен 18 пикселям.Не обязательно очевидно, что означает радиус в 92 пикселя в этом случае.Однако вы можете указать как радиус X, так и Y, используя что-то вроде этого:

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

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

Answer 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/

Answer 3

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

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

Answer 4

простой тип, просто используйте:

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

где:

border-radius:top right bottom left;