Мобильный LiveInternet Как вставить изображение в рамочку? | Tanyusha100 - Дневник Tanyusha100

Авторизация

Дневник Tanyusha100 Лента друзей - Дневник - Полная версия

Как вставить изображение в рамочку? 25-02-2023 10:41 к комментариям - к полной версии - понравилось!

Это цитата сообщения Юлия_Гурбер Оригинальное сообщение

Как вставить изображение в рамочку?
Рамка вокруг изображения

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

Название цвета указываем по-английски. Значения меняем в строке:
style="border: 10px double Blue", где 10 — толщина, double — стиль, Blue — цвет.
Сначала покажу примеры рамок, а ниже представлю их коды.

Вариант 1

Изображение
заключено в двойную
рамку: стиль double;

Вариант 2

Левый край рамки
темнее правого:
стиль inset;

Вариант 3

Правый край рамки
темнее левого:
стиль outset;

Вариант 4

Пунктирная рамка
вокруг изображения
из точек: стиль dotted;

Вариант 5

Пунктирная рамка
вокруг изображения
из коротких отрезков:
стиль dashed;

Вариант 6

Сплошная рамка
вокруг изображения:
стиль solid;

Вариант 7

А эта рамка весьма
необычная. У неё
левая и верхняя
сторона имеют свой
тип, цвет и размер.

Вариант 1:

<p><img src="Адрес изображения" width="Ширина изображения" height="Высота изображения" align="absmiddle" style="border: 10px double Blue" /></p>

Вариант 2:

<p><img src="Адрес изображения" width="Ширина изображения" height="Высота изображения" align="absmiddle" style="border: 10px inset Pink" /></p>

Вариант 3:

<p><img src="Адрес изображения" width="Ширина изображения" height="Высота изображения" align="absmiddle" style="border: 10px outset Orange" /></p>

Вариант 4:

<p><img src="Адрес изображения" width="Ширина изображения" height="Высота изображения" align="absmiddle" style="border: 10px dotted Red" /></p>

Вариант 5:

<p><img src="Адрес изображения" width="Ширина изображения" height="Высота изображения" align="absmiddle" style="border: 10px dashed Green" /></p>

Вариант 6:

<p><img src="Адрес изображения" width="Ширина изображения" height="Высота изображения" align="absmiddle" style="border: 10px solid Gold" /></p>

Вариант 7:

<p><img src="Адрес изображения" width="Ширина изображения" height="Высота изображения" align="absmiddle" style="border: 10px solid Green; border-top-style: dashed; border-top-color: Orange; border-left: 3px solid Red; border-left-style: dotted; padding: 5px; border=" /></p>

Подготовила Юлия Гурбер

вверх^ к полной версии понравилось! в evernote

Комментарии (1):

Хитр_из_Дупла 01-03-2023-21:30 удалить

Tanyusha100, спасибо большое! эти шаблоны мне пригодятся. и не раз!

Обратиться - Ответить - К полной версии

Комментарии (1): вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Как вставить изображение в рамочку? | Tanyusha100 - Дневник Tanyusha100 - "Дом и семья" | Лента друзей Tanyusha100 / Полная версия Добавить в друзья Страницы: раньше»