English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
border-radius устанавливает углы элемента в виде закругленных углов. Этоborder-top-left-radius，border-top-right-radius，border-bottom-right-radiusиborder-bottom-left-radiusСокращение свойств.
В таблице приведены инструкции по использованию и историю версий этого свойства, а также его использование в скриптах JavaScript.
| Значение по умолчанию: | 0 |
|---|---|
| Подходит для: | Все элементы |
| Наследование: | Нет |
| Анимируемо: | Да.См. также Анимационные свойства。 |
| Версия: | Новая функция CSS3 |
| JavaScript грамматика: | object object.style.borderRadius="8px" |
Обратите внимание:border-radius даже если не определен край или его значение установлено в none, этот атрибут сделает 背景 элемента круглым.
Грамматика этого свойства такая:
border-radius:[длина | процент] 1 до 4 значений \-------------------------------/ Первый радиус /[длина | процент] 1 до 4 значений | начальное | наследовать \------------------------------/ Второй радиус (необязателен)
Эта аббревиатура может использовать один, два, три или четыре значения, разделенных пробелами.
Если указаноЗначениеЕсли это так, то оно определяет радиус всех углов.
четыре значениядва значенияпервое значение используется для левого верхнего и правого нижнего углов, а второе значение используется для правого верхнего и левого нижнего углов.
четыре значениятри значенияпервое значение используется для левого верхнего угла, второе значение используется для правого верхнего и нижнего углов, третье значение используется для правого нижнего угла.
четыре значениячетыре значения, то они применяются к углам в порядке: левый верхний, правый верхний, правый нижний и левый нижний.Если указаны
Ниже приведены примеры того, как использовать атрибут border-radius.
div {
border: 2px solid #f08080;
border-radius: 20px;
}Проверьте, посмотрите ›/‹Обратите внимание:Дополнительное значение длины (начинается с «/») определяет вертикальный радиус угла, поэтому форма угла — четверть эллипса. Если второе значение длины опущено или равно второму значению, форма угла — четверть круга. Если любое значение равно нулю, угол будет квадратным, а не закругленным.
В таблице ниже описаны значения этого атрибута.
| Значение | Описание |
|---|---|
| length | В значениях длины px, pt, cm, em и т.д., негативные значения не допускаются. |
| percentage | Размер радиуса в процентах. Если угол эллиптический, то горизонтальный радиус вычисляется как процент от ширины элемента, а вертикальный радиус вычисляется как процент от высоты элемента. Негативные значения не допускаются. |
| initial | Установить этот атрибут в его значение по умолчанию. |
| inherit | Если указано, то связанный элемент использует значение атрибута border-radius родительского элемента. |
Совместимость браузеров с атрибутом border-radius, числа в таблице указывают на минимальную версию браузера, поддерживающую этот атрибут; все основные браузеры поддерживают этот атрибут.
|
Предупреждение: Internet Explorer 8 и более ранние версии не поддерживают этот атрибут border-radius. В IE9 и более поздних версиях поддерживается.
См. также учебник:CSS Border，CSS3 Border。
Связанные свойства:border-bottom-left-radius，border-bottom-right-radius，border-top-left-radius，border-top-right-radius