Модель бокса
Свойства рамки
Свойства рамки специфицируют ширину, цвет и стиль области рамки бокса. Эти свойства применимы ко всем элементам.
Ширина рамки: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' и 'border-width'
Свойства ширины рамки специфицируют ширину области рамки. Свойства, определённые в этом разделе, относятся к типу значений <border-width>, который может устанавливаться в:
thin
Тонкая рамка.
medium
Средняя рамка.
thick
Толстая рамка.
<length>
Толщина рамки имеет точное значение. Это значение не может быть негативным.
Интерпретация первых трёх значений зависит от ПА. Следующие соотношения, однако, обязаны выдерживаться:
'thin' <='medium' <= 'thick'.
К тому же эти значения ширины обязаны быть константными в пределах документа.
'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
Значение: <border-width> | inherit
Начальное: medium
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
Эти свойства устанавливают верхнюю, правую, нижнюю и левую линии рамки для бокса.
'border-width'
Значение: <border-width> {1,4} | inherit
Начальное: см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
Это сокращённое свойство для установки 'border-top-width', 'border-right-width', 'border-bottom-width' и 'border-left-width' в одном месте в таблице стилей.
Если имеется одно значение, то оно применяется ко всем сторонам. Если дано два значения, верхняя и нижняя линии рамки устанавливаются в первое, а правая и левая линии рамки - во второе значение. Если дано три значения, верхняя линия рамки устанавливается в первое, левая и правая - во второе, а нижняя линия рамки - в третье значение. Если задано четыре значения, они применяются к верхней, правой, нижней и левой линиям рамки соответственно.
Комментарии в данном примере поясняют результаты установки ширины верхней, правой, нижней и левой линий рамки:
H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thick */Цвет рамки: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' и 'border-color'
Эти свойства специфицируют цвет рамки бокса.
'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
Значение: <color> | inherit
Начальное: значение свойства 'color'
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
'border-color'
Значение: <color> {1,4} | transparent | inherit
Начальное: см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
Свойство 'border-color' устанавливает цвет рамки с четырёх сторон. Значения имеют следующий смысл:
<color>
Специфицирует значение цвета.
transparent
Рамка прозрачна (хотя и может иметь ширину).
Свойство 'border-color' может иметь от одного до четырёх значений, и эти значения устанавливаются для четырёх сторон так же, как и в 'border-width'.
Если цвет рамки элемента не специфицирован в свойстве рамки, ПА обязаны использовать значение свойства 'color' элемента как "Установка значений свойств. Каскадирование и Наследование" цвета рамки.
В этом примере рамка будет сплошной и чёрной:
P {
color: black;
background: white;
border: solid;
}Стиль рамки: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' и 'border-style'
Свойства стиля рамки специфицируют стиль линии рамки бокса (solid, double, dashed и т.д.). Свойства, определённые в этом разделе, относятся к типу значений <border-style>, который может устанавливаться в:
none
Нет рамки. Форсирует вычисленное значение 'border-width' в '0'.
hidden
То же, что и 'none', за исключением "Таблицы" рамок для элементов таблицы.
dotted
Рамка из точек.
dashed
Рамка из пунктирных линий.
solid
Рамка из сплошной линии.
double
Двойная сплошная линия. Сумма двух линий и пространства между ними равна значению 'border-width'.
groove
Рамка выглядит как вырезанная в канве.
ridge
Противоположно 'groove': рамка выглядит как выступающая над канвой.
inset
Весь бокс выглядит вдавленным в канву.
outset
Противоположно 'inset': выпуклый бокс.
Все рамки прорисовываются на поверхности фона бокса. Цвет рамок со значениями 'groove', 'ridge', 'inset' и 'outset' зависит от свойства 'color' элемента.
Соответствующие пользовательские агенты (ПА) HTML могут интерпретировать 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как 'solid'.
'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
Значение: <border-style> | inherit
Начальное: none
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
'border-style'
Значение: <border-style> {1,4} | inherit
Начальное: см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
Свойство 'border-style' устанавливает стиль для четырёх сторон рамки. Может иметь от одного до четырёх значений, и значения устанавливаются для разных сторон, как для 'border-width' выше.
#xy34 { border-style: solid dotted }В этом примере горизонтальные линии рамки будут 'solid', а вертикальные - 'dotted'.
Поскольку начальное значение стиля рамки - 'none', рамка будет видна только после установки значения стиля.
Сокращённые свойства рамок: 'border-top', 'border-bottom', 'border-right', 'border-left' и 'border'
'border-top', 'border-right', 'border-bottom', 'border-left'
Значение: [ < 'border-top-width' > || < 'border-style' > || <color> ] | inherit
Начальное: см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
Это сокращённое свойство для установки ширины, стиля и цвета верхней, правой, нижней и левой сторон рамки.
H1 { border-bottom: thick solid red }Это правило устанавливает ширину, стиль и цвет рамки после элемента H1. Опущенные значения установлены в свои начальные значения.
Поскольку нижеследующее правило не специфицирует цвет рамки, рамка будет иметь цвет, определённый свойством 'color':
H1 { border-bottom: thick solid }'border'
Значение: [ < 'border-width' > || < 'border-style' > || <color> ] | inherit
Начальное: см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется: нет
Процентное: N/A
Носитель: визуальный
Свойство 'border' - это сокращённое свойство для установки одинаковых значений ширины, цвета и стиля для всех четырёх сторон рамки бокса. В отличие от сокращённых свойств 'margin' и 'padding', свойство 'border' не может устанавливать разные значения для четырёх сторон. Для этого придётся использовать одно или более других свойств.
Первое правило эквивалентно установке четырёх последующих значений:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}Поскольку, в некоторой степени, свойства могут перекрываться, порядок, в котором правила специфицированы, имеет важное значение.
BLOCKQUOTE {
border-color: red;
border-left: double;
color: black
}В приведённом примере цвет левой линии рамки - чёрный, а других линий - красный. Это потому, что в 'border-left' установлены ширина, стиль и цвет. Поскольку значение цвета в свойстве 'border-left' не установлено, оно будет взято из свойства 'color'. Фактически свойство 'color', установленное после свойства 'border-left', не имеет к этому никакого отношения.