Как сделать обводку картинки в css
Перейти к содержимому

Как сделать обводку картинки в css

  • автор:

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

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

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

Изображения .border

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

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

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

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

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

Изображения

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

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

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

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

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

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

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

См. также

  • border
  • Блочные элементы
  • Добавление треугольника
  • Колесо для сокращённых свойств
  • Открываем блочную модель
  • Оформление ссылок
  • Повёрнутые рамки
  • Свойство border
  • Строчные элементы

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

Иногда при создании веб-страницы может быть необходимо добавить рамку к изображению без использования Photoshop или других редакторов. CSS поможет с этой задачей, добавляя к изображениям разноцветные рамки любой ширины и длины.

Можно создать обычную рамку вокруг изображения, используя CSS свойства border, padding и background.

1. Создайте HTML

  • Сначала создайте элемент с названием класса «frame».
  • Укажите элемент в .
  • Задайте атрибут alt для изображения.
div img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div>

2. Создайте CSS

  • Задайте высоту и ширину рамки.
  • Укажите стиль, ширину и цвет границы с помощью сокращенного свойства border .
  • Задайте фоновый цвет.
  • Установите свойство margin со значением «auto» и padding с двумя значениями. Первое значение указывает верхнюю и нижнюю сторону, а второе указывает правую и левую сторону.
  • Задайте 100% для ширины и высоты изображения.
.frame < width: 450px; height: 350px; border: 3px solid #ccc; background: #eee; margin: auto; padding: 15px 25px; > img < width: 100%; height: 100%; >

Пример

html> html> head> title>Заголовок документа title> style> .frame < width: 450px; height: 350px; border: 3px solid #ccc; background: #eee; margin: auto; padding: 15px 25px; > img < width: 100%; height: 100%; > style> head> body> div class="frame"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>

Если хотите создать круглую рамку для изображения, задайте border-radius со значением 50% для всех сторон границы. Установите border-color, border-style, border-width, согласно вашим требованиям. Не забудьте задать overflow: hidden;, чтобы остальная часть изображения была невидимой.

Пример

html> html> head> title>Заголовок документа title> style> .circle < border-color: #666 #1c87c9; border-image: none; border-radius: 50% 50% 50% 50%; border-style: solid; border-width: 25px; height: 200px; width: 200px; overflow: hidden; > img < height: 100%; width: 100%; > style> head> body> div class="circle"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>

Можно получить разные эффекты, меняя свойства border-radius и border-color . Например, если хотите получить квадратную рамку, необходимо для всех сторон задать border-radius 0.

Пример

html> html> head> title>Заголовок документа title> style> .square< height: 200px; width: 200px; border-color: #666 #1c87c9; border-image: none; border-radius: 0 0 0 0; border-style: solid; border-width: 30px; > img < height: 100%; width: 100%; > style> head> body> div class="square"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>

Если хотите, чтобы указанные углы были скруглены, задайте border-radius со значением 50px для этих углов. В таком случае измените также width и height в соответствии с размером изображения.

Пример

html> html> head> title>Заголовок документа title> style> .rounded-borders < height: 200px; width: 300px; border-color: #666 #8ebf42; border-image: none; border-radius: 50px 0 50px 0; border-style: solid; border-width: 20px; > img < height: 100%; width: 100%; > style> head> body> div class="rounded-borders"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>

Как добавить границы с изображением для рамки?

Возможно также добавить изображение в качестве границы. Для этого существует CSS свойство border-image , которое позволяет указать изображение, которое будет использовано как граница вокруг элемента.

Можно указать, как повторять изображение границы, следующими способами:

  • stretch — изображение растягивается таким образом, чтобы заполнить область (значение по умолчанию)
  • repeat — изображение повторяется, чтобы заполнить область
  • round— изображение повторяется, чтобы заполнить область (если оно не заполняет область целым числом частей, масштаб изображения меняется так, чтобы заполнить)
  • space — изображение повторяется, чтобы заполнить область (если оно не заполняет область целым числом частей, дополнительное пространство распределяется между этими частями)

Пример

html> html> head> title>Заголовок документа title> style> div < width: 80%; height: 300px; margin-bottom: 20px; background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat; background-size: cover; > img < width: 30%; height: 30%; > .border-one < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 50 round; > .border-two < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 35% round; > .border-three < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 100% round; > .border-four < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 20 stretch; > style> head> body> div class="border-one"> div> div class="border-two"> div> div class="border-three" > div> div class="border-four" > div> hr> p>Оригинальное изображение: p> img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border"> body> html>

Как сделать рамку для картинки в html

Чтобы создать рамку для картинки в HTML, можно использовать CSS свойство border .

Например, чтобы создать рамку вокруг картинки, можно использовать следующий код:

 src="my-image.jpg" alt="My Image" style="border: 1px solid black;"> 

В этом примере мы используем элемент img для отображения картинки и задаем ему свойство style , чтобы установить рамку. Стиль задает тип рамки (например, solid для сплошной рамки), а цвет определяет цвет рамки (например, black для черного цвета).

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

Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рис. 1 продемонстрирована фотография с паспарту.

Пример паспарту

Рис. 1. Пример паспарту

Как сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?

За изменение стиля элемента при наведении на него указателя мыши отвечает псевдокласс :hover . Для управления стилем ссылок этот псевдокласс добавляется к селектору A через двоеточие.

Как изменить цвет рамки вокруг изображения-ссылки?

Рамка вокруг изображения появляется в том случае, когда к тегу добавляется свойство border с ненулевым значением и при создании изображения-ссылки. При этом тег хранится внутри контейнера . Независимо от ситуации цвет рамки устанавливается автоматически, однако через стили можно задать любой желаемый цвет границы.

Как убрать рамку вокруг изображений-ссылок?

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

Для добавления рамки вокруг картинки применяется стилевое свойство border , которое следует добавлять к селектору IMG . В качестве значения одновременно указывается толщина границы, ее стиль и цвет. Например, для создания сплошной рамки толщиной два пиксела красного цвета необходимо записать IMG .

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *