Рамка вокруг изображений

Для добавления вокруг изображения цветной рамки применяется стилевое свойство border. В стилях добавляем это свойство к селектору img и указываем толщину рамки, её цвет и стиль. Тогда рамка добавится для всех изображений на странице. Для выбранных рисунков можно ввести собственный класс и писать его только для выбранных элементов <img> (пример 1).

Пример 1. Добавление рамки

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Изображения</title> <style> .border { border: 3px solid #00af64; } </style> </head> <body> <img src="image/thumb1.jpg" alt="" class="border"> <img src="image/thumb2.jpg" alt="" class="border"> <img src="image/thumb3.jpg" alt=""> </body> </html>

В данном примере к двум изображениям добавляется класс border, через который устанавливается зелёная рамка (рис. 1).

Рамка вокруг фотографий

Рис. 1. Рамка вокруг фотографий

Рамку можно добавлять и при наведении курсора на изображение через псевдокласс :hover. Но это ожидаемо приведёт к сдвигу картинки, поскольку свойство border влияет на общую ширину и высоту элемента. Чтобы избежать такого поведения к селектору img предварительно добавляется невидимая рамка, как показано в примере 2.

Пример 2. Рамка вокруг изображений

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Изображения</title> <style> img { border: 3px solid transparent; /* Прозрачная рамка */ } img:hover { border: 3px solid #00af64; /* Цветная рамка */ } </style> </head> <body> <img src="image/thumb1.jpg" alt=""> <img src="image/thumb2.jpg" alt=""> <img src="image/thumb3.jpg" alt=""> </body> </html>

Другой способ добавления рамки — использование свойства outline. Оно, в отличие от border, не влияет на размеры элемента, поэтому прозрачная рамка уже не нужна.

img:hover {
 outline: 3px solid #00af64; /* Цветная рамка */
}

Несмотря на схожесть этих свойств, у них есть небольшие различия:

outline выводится вокруг элемента (border внутри);
outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Ещё один способ создания рамки заключается в добавлении фона к <img>. Сам фон сразу не виден, поэтому надо установить ещё свойство padding, его значением выступает толщина рамки (пример 3).

Пример 3. Использование background и padding

img {
 padding: 10px; /* Толщина рамки */
 background: #6dcff6; /* Цвет рамки */
}

Сюда же можно включить свойство border и получить новый вид рамки. Вообще, комбинируя padding, border, outline и background можно сделать множество самых разнообразных рамок.

изображения