Ширина рамки

Следующий шаг после назначения стиля рамки – задание некоторой ширины с помощью свойства border-width. Каждое из этих свойств служит для задания ширины рамки с определенной стороны, конечно, аналогично свойствам для определения полей. В CSS2.1 ширина рамки по-прежнему не может быть задана процентным значением, что крайне досадно. Задать ширину рамки можно четырьмя способами: присвоить ей значение в единицах измерения длины, например 4px или 0.1em, или посредством одного из трех ключевых слов. Эти ключевые слова: thin, medium (применяемое по умолчанию значение) и thick. Не обязательно, чтобы эти ключевые слова точно соответствовали какой-либо конкретной ширине, они просто определены относительно друг друга. Согласно спецификации рамка thick всегда шире, чем medium, которая, в свою очередь, всегда шире thin.

Тем не менее точные значения ширины не определены, поэтому один агент пользователя мог бы приравнять их значениям 5px, 3px и 2px, тогда как в другом это были бы 3px, 2px и 1px. Неважно, какую ширину агент пользователя ставит в соответствие каждому ключевому слову, она будет одинакова по всему документу независимо от того, где встречается рамка. Итак, если значение medium аналогично 2px, ширина рамки среднего размера всегда будет равна 2 пикселам независимо от того, какой элемент она окружает – h1 или p.


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

p {margin: 5px; background-color: silver;
borderstyle: solid;}

Ширина рамки по умолчанию равна medium. Изменить ее довольно просто:

p {margin: 5px; background-color: silver;
borderstyle: solid; border-width: thick;}

Конечно, для ширины рамки можно задавать довольно нелепые предельные значения, как, например где мы видим 50-пиксельную рамку:

p {margin: 5px; backgroundcolor: silver;
border-style: solid; border-width: 50px;}

Кроме того, посредством двух хорошо знакомых нам методов можно задавать ширину рамки для каждой стороны отдельно. Первый метод – использовать специальные свойства, о которых упоминалось в начале этого раздела, такие как border-bottom-width. Другой способ – обратиться к тиражированию значения в свойстве border-width:

h1 {border-style: dotted; border-width: thin 0;}
p {border-style: solid; border-width: 15px 2px 7px 4px;}

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Абсолютные значения и поля
Задание рамки одним свойством
Несколько стилей
Основные блоки элементов
Отрицательные и свернутые поля

Вернуться в раздел: CSS / 8. Отступы, рамки и поля