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

Изображение, добавляемое на web-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега . По умолчанию рамка вокруг Имаги не отображается за исключением случая, когда рисунок является ссылкой. Цвет рамки в этом случае совпадает с цветом контента, заданным с помощью стиля или параметра text тега (пример 1).

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

border="2" alt="Рамка зеленого цвета толщиной 2 пиксела">

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

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

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

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

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

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

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

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

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

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

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

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

В этом уроке будет показано, как выводить картинку на страницу и задавать значения некоторых параметров: длина, ширина, "название", толщина и цвет рамки.

Создайте папку "images" в той же директории (общей папке), в которой у вас находятся html-страницы. После этого в папку "images" загрузите какую-нибудь картинку, например эту:

Для вывода изображения применяется тег " " . Внутри него пишется путь к изображению и задаются нужные параметры.

Для начала просто напишем путь к изображению — оно будет выведено в оригинальном размере:

Теперь зададим картинке параметры длины, ширины и название.

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

Рассмотрим, как сделать рамку вокруг изображения и задать ей цвет и ширину. Это делается с помощью простого атрибута CSS — style="border: " в котором задаётся ширина и цвет рамки.

В следующем уроке будет рассмотрен вывод изображения относительно текста.

Ссылка на основную публикацию
Adblock
detector