Справочник по CSS : Тематический указатель : Расширения CSS для Firefox (Gecko) : Свойства : -moz-border-radius
смотрим также
Материал из Справочник Web-языков
Содержание |
Свойство -moz-border-radius
Используется, чтобы сделать углы границ элемента закругленными.
Синтаксис
-moz-border-radius: <border-radius>{1,4} [ / <border-radius>{1,4}]?
Используемые значения
- <border-radius>
- Задается 1, 2, 3 или 4 значениями, после которых может следовать слэш /, и еще один набор значений. <border-radius> может задаваться с помощью:
- length
- Допустимо использовать следующие единицы измерения: cm, mm, in, pt, pc, em, ex, или px.
- percentage
- В CSS 3 проценты для радиуса горизонтальных закруглений высчитываются в зависимости от ширины области, для которой задаются округлые границы, а для вертикальных - в зависимости от высоты области. Однако, в Gecko (Firefox) (не по стандарту) проценты высчитываются в зависимости от ширины области.
Значением по умолчанию является 0. Атрибут Каскадных таблиц стилей (CSS) не наследуется.
Замечания
Радиус закруглений в свойстве -moz-border-radius определяется в зависимости от числа заданных значений:
- Если задано одно значение, то значение для радиуса применяется ко всем 4 углам.
- Если заданы два значения, то первое значение применяется для радиуса верхнего левого и нижнего правого углов; а второе - для радиуса верхнего правого и нижнего левого углов.
- Если заданы четыре значения, то они применяются в следующем порядке: верхний левый угол, верхний правый угол, нижний правый угол, нижний левый угол (по часовой стрелке).
- Если заданы три значения, то они применяются по такому же принципу, как если бы их было четыре, но только второе значение применяется для верхнего правого и нижнего левого углов.
Свойство -moz-border-radius применяется также к фону, если у элемента нет границ (border).
Эллиптические границы не поддерживаются вплоть до Gecko 1.9.1 (Firefox 3.5).
Если для границ элемента заданы значения dotted или dashed, то при использовании свойства -moz-border-radius закругленные углы все равно отображаются как solid.
Свойство -moz-border-radius не применяется для таблиц, если для них для свойства border-collapse задано значение collapse.
Safari/WebKit не поддерживают описание с помощью слэша /. Поэтому, если задано два значения для свойства -moz-border-radius через слэш, то эллиптические границы будут установлены для всех 4 углов.
Примеры
В примерах показано как описать свойство -moz-border-radius
pre { border: solid 10px; /* Граница отобразится в виде черной буквы 'D' */ -moz-border-radius: 0 50px 50px 0; border-radius: 0 50px 50px 0; }
pre { border: groove 1em red; -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; }
pre { background: gold; -moz-border-radius: 40px 10px; border-radius: 40px 10px; }
pre { background: gold; border: ridge gold; -moz-border-radius: 13em/3em; -webkit-border-radius: 13em 3em; border-radius: 13em/3em; }
/* описания эквивалентны */ -webkit-border-radius: 40px 10px; -moz-border-radius: 40px/10px; border-radius: 40px/10px;
Поддерживаемые браузеры
Firefox (Gecko) начиная с версии 1.0 (1.0) - для -moz-border-radius, и начиная с версии 3.5 (1.9.1) - для эллиптических границ.
Opera начиная с версии 10.5 - для border-radius.
Safari (WebKit) начиная с версии 3.0 (522) - для -webkit-border-radius.
Стандарты
CSS 3 Backgrounds and Borders #border-radius
Смотрите также
-moz-border-radius-topleft, -moz-border-radius-topright, -moz-border-radius-bottomright, -moz-border-radius-bottomleft.