Разделы

Как добавить рамку к изображению?

Для добавления рамки вокруг картинки применяется стилевой атрибут border, который следует добавлять к селектору IMG. В качестве значения одновременно указывается толщина границы, ее стиль и цвет. Например, для создания сплошной рамки толщиной два пиксела красного цвета необходимо записать IMG {border: 2px solid #ff0000;}.

В примере 1 приведен полный код для добавления рамки к изображениям на странице.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Винни-Пух</title>
  <style type="text/css">
   IMG {
    border: 3px solid #00a8e1;
   }
  </style>
 </head>
 <body>
  <p><img src="figure.jpg" alt="Винни-Пух" width="100" height="111"></p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Изображение с рамкой

В данном случае рамка будет добавляться ко всем изображениям на странице. Чтобы установить рамку только для выбранных рисунков, можно воспользоваться стилевым классом, указывая его для определенных тегов <IMG> (пример 2).

Пример 2. Добавление рамки к избранным рисункам

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Винни-Пух</title>
  <style type="text/css">
   IMG.border {
    border: 3px solid #00a8e1;
   }
  </style>
 </head>
 <body>
  <p><img src="figure.jpg" alt="Винни-Пух" width="100" height="111"></p>
  <p><img src="figure.jpg" alt="Винни-Пух" width="100" height="111" class="border"></p>
 </body>
</html>

В данном примере введен стилевой класс border, который добавляется к выбранным рисункам с помощью параметра class.

Разделы

Термины

Как добавить рамку к изображению?

Отправить комментарий