Справочник по 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.

Ссылки на источники

https://developer.mozilla.org/en/CSS/-moz-border-radius

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="http://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования