English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Свойство border-style CSS устанавливает стиль одного края, то естьborder-top-style,border-right-style,border-bottom-styleиborder-left-styleкраткая форма свойств.
В таблице ниже приведены примеры использования и история версий этого свойства, а также синтаксис его использования в скриптах JavaScript.
| Значение по умолчанию: | none |
|---|---|
| Применяется к: | Все элементы |
| Инheritance: | Нет |
| Анимируемо: | Нет.См. также Анимационные свойства. |
| Версия: | CSS 1, 2, 3 |
| JavaScript синтаксис: | object object.style.borderStyle="dotted double" |
Синтаксис этого свойства следующий:
border-style: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] 1 to 4 values | initial | inherit
Эта аббревиатура может принимать один, два, три или четыре значения, разделенные пробелами.
Если указанодин значениеЕсли указано, то оно будет применяться ко всем четырем краям.
Если указаныдва значенияЕсли указаны, то первое значение будет применяться к верхнему и нижнему краям, а второе к правому и левому краям.
Если указанытри значения则 первый значение будет применяться к верхнему краю, второй к боковым краям, третий к нижнему краю.
Если указанычетыре значенияЕсли указаны все четыре значения, то каждый из них будет применяться в порядке: сверху, справа, снизу и слева.
Ниже приведен пример того, как использовать свойство border-style.
p {
border-style: double;
border-width: 5px;
}проверим, посмотри‹/›В таблице ниже описаны значения этого свойства.
| значение | описание |
|---|---|
| none | нет показа рамки. |
| hidden | Так же, как и none, но с той разницей, что ячейки таблицы имеютСворачиваемая рамкаи две ячейки делят рамку. Значение hidden гарантирует, что рамка не рисуется, так как hidden имеет приоритет перед всеми другими стилями рамки. |
| dotted | Показывать рамку как серия точек. |
| dashed | Показывать рамку как серия коротких отрезков, то есть тире. |
| solid | Показывать рамку как сплошную линию. |
| double | Показывать рамку как две параллельные сплошные линии, оставляя между ними определенное расстояние. Общая длина двух линий и расстояние между ними равноborder-widthзначение. |
| groove | Показывать рамку, которая как будто выгравирована в холсте. Это создает впечатление 3D, обычно достигается созданием тени с помощью цвета, более темного, чем цвет рамкиborder-colorСоздается тень с двумя более светлыми и darker цветами. |
| ridge | Показывать рамку, обратную по эффекту groove. Это также создает впечатление 3D, рамка выглядит, как если бы она выходила из холста. |
| inset | Показывать рамку, которая выглядит, как если бы она была встроена в холст. Это создает впечатление 3D, обычно достигается созданием тени из двух цветов, более темных, чем цвет рамкиborder-colorНемного ярче и darker. |
| outset | Показывать рамку, обратную по эффекту inset. Это также создает впечатление 3D, рамка делает коробку, как будто она выходит из холста. |
| inherit | Если указано, то связанный элемент использует значение border-top-style родительского элемента. |
Совместимость браузеров для свойства border-style, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.
Поддержка браузеров –
|
Предупреждение: Интернет-Explorer 7 и более ранние версии не поддерживают значение hidden. IE8 поддерживает, но требует<!DOCTYPE>. Поддержка значения hidden доступна в IE9 и более новых версиях.
См. также учебник:CSS Border,CSS3 Border.
Связанные свойства:border,border-width,border-color,border-top-style,border-right-style,border-bottom-style,border-left-style.