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