В этой статье я расскажу о создании рамки вокруг элемента посредством CSS. С помощью рамок можно добиться интересных эффектов с текстом, таблицами и изображениями.
Сложность: средний уровень
Создание рамки
Рамки задаются с помощью параметра border, в котором задаются значения параметров border-style, border-width и border-color.
Пример:
<span style="border: dashed 3px green">Зеленая рамка dashed 3px</span> (задание параметров рамки)
Можно сделать рамку с одной стороны, используя параметры border-top (сверху), border-right (справа), border-bottom (снизу) и border-left (слева) вместо атрибута border:
Или с двух сторон, используя 2 атрибута, например border-bottom и border-left:
<style>
#border1 {border: dotted 1px green} (задание цвета рамки словом green)
#border2 {border: dotted 1px #88bf67; } (задание цвета рамки шестнадцатеричным форматом)
</style>
Для одного элемента можно с разных сторон можно сделать разные стили рамок разных цветов и разного размера. Вот как это делается:
<style>
#border1 {
border-top: groove 3px blue;
border-right: inset 4px red;
border-bottom: solid 5px yellow;
border-left: outset 6px green;
}
</style>
Рамка для изображений и таблиц
Рамку можно делать не только для текста, но и для других элементов, например для графики и таблиц. Принцип использования тот же:
<img src="images/picture1.gif" style="border: dashed 3px blue"> (задание рамки для изображения)
Параметры рамок Описание
border-style задает вид рамки
border-color цвет рамки
border-width размер рамки в пикселях
border-top рамка сверху
border-right рамка справа
border-bottom рамка снизу
border-left рамка слева
Рамкам в таблице можно посвятить отдельную тему, т.к. для таблицы существует еще множество атрибутов их отображения посредством HTML (см. тему "Таблицы").
Примечание: в браузерах рамка таблицы по умолчанию отображается черной, кроме как всегда отличающегося IE, который выводит бледно-серую рамку. Поэтому для одинакового отображения таблицы во всех браузерах обязательно указывайте их цвет.