Стили рамки
<стиль-рамки> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset none Нет рамки (влечет присваивание border-width значения 0). hidden Скрытая рамка. То же, что none, кроме таблиц (см. этот пункт). dotted Пунктирная рамка (выводится точками). dashed Штриховая рамка (выводится короткими отрезками). solid Сплошная рамка (выводится сплошной линией). double Двойная рамка (выводится двойной сплошной линией). groove Рамка изображается в виде трехмерной выемки. ridge Противоположность groove. Рамка изображается в виде трехмерного выступа. inset Рамка изображается в виде трехмерной врезки. outset Противоположность inset. Рамка изображается в виде трехмерного вырезки.
Поддержка : | | Стиль hidden отображается как none (4.0+) | | | Стиль hidden отображается как outset, dotted и dashed как solid (4.0+) |
Стиль верхней рамки: свойство border-top-style
Синтаксис: | border-top-style: <стиль-рамки> | inherit | Начально: | none | Применимо: | ко всем элементам | Наследуемо: | нет | Проценты: | не используются | Устройства: | визуальные |
Поддержка : | | Соответствует стандарту (4.0+) | | | Не поддерживается |
Свойство border-top-style задает стиль верхней рамки объемлющего прямоугольника. Пример:
H1 { border-top-style: solid }
Стиль нижней рамки: свойство border-bottom-style
Синтаксис: | border-bottom-style: <стиль-рамки> | inherit | Начально: | none | Применимо: | ко всем элементам | Наследуемо: | нет | Проценты: | не используются | Устройства: | визуальные |
Поддержка : | | Соответствует стандарту (4.0+) | | | Не поддерживается |
Свойство border-bottom-style задает стиль нижней рамки объемлющего прямоугольника. Пример:
H1 { border-bottom-style: none }
Стиль левой рамки: свойство border-left-style
Синтаксис: | border-left-style: <стиль-рамки> | inherit | Начально: | none | Применимо: | ко всем элементам | Наследуемо: | нет | Проценты: | не используются | Устройства: | визуальные |
Поддержка : | | Соответствует стандарту (4.0+) | | | Не поддерживается |
Свойство border-left-style задает стиль левой рамки объемлющего прямоугольника. Пример:
H1 { border-left-style: dashed }
Стиль правой рамки: свойство border-right-style
Синтаксис: | border-right-style: <стиль-рамки> | inherit | Начально: | none | Применимо: | ко всем элементам | Наследуемо: | нет | Проценты: | не используются | Устройства: | визуальные |
Поддержка : | | Соответствует стандарту (4.0+) | | | Не поддерживается |
Свойство border-right-style задает стиль правой рамки объемлющего прямоугольника. Пример:
H1 { border-right-style: double }
Стили рамки: свойство border-style
Синтаксис: | border-style: <стиль-рамки> (1,4) | inherit | Начально: | none | Применимо: | ко всем элементам | Наследуемо: | нет | Проценты: | не используются | Устройства: | визуальные |
Поддержка : | | Соответствует стандарту (4.0+) | | | Не поддерживается |
Свойство border-style является сокращением для свойств border-top-style, border-bottom-style, border-left-style и border-right-style. Оно задает стиль всех рамок объемлющего прямоугольника одновременно.
Значением этого свойства может быть от одного до четырех стилей. Если заданы все стили, то они применяются к верхней, правой, нижней и левой рамке соответственно. Если задан только один стиль, то он применяется ко всем рамкам. Если заданы два или три значения, то недостающий стиль принимается равным стилю противоположной рамки. Примеры:
H1 { border-style: solid } /* все рамки имеют стиль solid */ H1 { border-style: solid none } /* top & bottom = solid, right & left = none */ H1 { border-style: solid dashed dotted } /* solid, dashed, dotted, dashed */
1 2 3 4 5 6 7
8 8 8
|