Как добавить рамку к изображению?
Для добавления рамки к изображению применяется стилевое свойство border, которое следует добавить к селектору img. В качестве значения одновременно указывается толщина рамки, её стиль и цвет. Например, для создания сплошной рамки толщиной два пикселя красного цвета необходимо записать border: 2px solid red. В примере 1 приведён полный код для добавления рамки к изображениям на странице.
Пример 1. Добавление рамки
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Рамка</title> <style> img { border: 3px solid green; /* Параметры рамки */ } </style> </head> <body> <p><img src="image/figure.jpg" alt="Винни-Пух"></p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Изображение с рамкой
В данном случае рамка будет добавляться ко всем изображениям на странице. Чтобы установить рамку только для выбранных рисунков, можно воспользоваться стилевым классом, указывая его для определенных элементов <img> (пример 2).
Пример 2. Добавление рамки к избранным рисункам
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Рамка</title> <style> .frame { border: 3px solid green; /* Параметры рамки */ } </style> </head> <body> <p> <img src="image/figure.jpg" alt="Винни-Пух"> <img src="image/figure.jpg" alt="Винни-Пух" class="frame"> </p> </body> </html>
Результат данного примера показан на рис. 2. В данном примере введён стилевой класс frame, который добавляется к выбранным рисункам с помощью атрибута class.
Рис. 2. Изображение с рамкой
Автор: Влад Мержевич
Источник: webref.ru