Для создания обводки вокруг картинки в HTML, можно использовать стили CSS. Вот несколько примеров, как это можно сделать:
➡️ Пример 1: Использование свойства CSS border
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Обводка картинки</title>
<style>
.image-border {
border: 5px solid red; /* Толщина, стиль и цвет обводки */
padding: 10px; /* Отступ между обводкой и картинкой */
}
</style>
</head>
<body>
<img src="path/to/your/image.jpg" alt="Пример изображения" class="image-border">
</body>
</html>➡️ Пример 2: Использование свойства CSS outline
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Обводка картинки</title>
<style>
.image-outline {
outline: 5px solid blue; /* Толщина, стиль и цвет обводки */
outline-offset: 5px; /* Расстояние от обводки до изображения */
}
</style>
</head>
<body>
<img src="path/to/your/image.jpg" alt="Пример изображения" class="image-outline">
</body>
</html>➡️ Пример 3: Добавление тени с помощью свойства CSS box-shadow
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Обводка картинки с тенью</title>
<style>
.image-shadow {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Смещение, размытие и цвет тени */
}
</style>
</head>
<body>
<img src="path/to/your/image.jpg" alt="Пример изображения" class="image-shadow">
</body>
</html>➡️ Пример 4: Овальная или круглая обводка
Если вам нужно создать круглую обводку вокруг изображения, можно использовать свойство border-radius.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Круглая обводка картинки</title>
<style>
.image-circle {
border: 5px solid green; /* Толщина, стиль и цвет обводки */
border-radius: 50%; /* Делаем обводку круглой */
}
</style>
</head>
<body>
<img src="path/to/your/image.jpg" alt="Пример изображения" class="image-circle">
</body>
</html>Эти примеры помогут вам создать обводку для изображений на веб-страницах. Вы можете настроить толщину, цвет и стиль обводки по своему усмотрению.