English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Руководство по CSS

CSS @rules (RULES)

Полный список свойств CSS

Метод использования и примеры border-bottom-left-radius в CSS3

border-bottom-left-radius используется в CSS для установки стиля закругления нижнего левого угла элемента. Этот圆可以是 круг или эллипс, когда значение равно 0, то это обычный прямоугольный угол, и форма фона, будь то изображение или цвет, будет受到影响 этим свойством.

В таблице ниже приведено описание использования и истории версий этого свойства, а также синтаксис использования в скриптах JavaScript.

Значение по умолчанию:0
Подходит для:Все элементы
Наследование:Нет
Анимируемо:Да.См. также Анимационные свойства.
Версия: Новая функция CSS3
Синтаксис JavaScript:objectobject.style.borderBottomRightRadius="3px"

Внимание:border-bottom-left-radius даже если не определен край или его значение установлено в none, этот атрибут сделает 背景 элемента круглым.

Синтаксис использования border-bottom-left-radius

Синтаксис этого свойства следующий:

border-bottom-left-radius: [ length | percentage ] 1 or 2 values | initial | inherit

Эта аббревиатура может принимать один или два значения, разделенных одним или двумя пробелами.

  • Опциональное второе значение длины определяет вертикальный радиус нижнего левого угла, поэтому форма угла будет четверть эллипса.

  • Если пропущено второе значение длины или оно равно второму значению длины, форма угла будет четверть круга. Если любое значение длины равно нулю, угол будет квадратом, а не закругленным.

Ниже приведен пример того, как использовать свойство border-bottom-left-radius.

  div {
   border: 2px solid #f08080;
   border-bottom-left-radius: 20px;
  }
Протестируйте и посмотрите‹/›

Значения свойств

В таблице ниже описаны значения этого свойства.

ЗначениеОписание
lengthЕдиницы измерения значения могут быть px, pt, cm, em и т.д., но значения не могут быть отрицательными.
percentageРазмер радиуса в процентах. В случае двух значений, первое значение percentages относительны ширины элемента рамки (горизонтальный радиус), а второе значение percentages относительны высоты элемента рамки (вертикальный радиус). Негативные значения не допускаются.
initialУстановите это свойство в его значение по умолчанию.
inheritЕсли указан, то связанный элемент принимает значение border-bottom-left-radius свойств родительского элемента.

Совместимость браузеров

Совместимость браузеров для свойств border-bottom-left-radius, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство, все основные браузеры поддерживают это свойство.

  • Firefox 4+

  • Google Chrome 4+

  • Internet Explorer 9+

  • Apple Safari 5+

  • Opera 10.5+

Предупреждение: Internet Explorer 8 и более ранние версии не поддерживают CSS-свойство border-bottom-left-radius. Поддерживается в IE9 и более поздних версиях.

Для дальнейшего чтения

См. также учебник:CSS Border,CSS3 Border.

Связанные свойства:border-radius,border-bottom-right-radius,border-top-left-radius,border-top-right-radius.