Мобильный LiveInternet Без заголовка | yankaivan

Авторизация

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

Без заголовка 16-08-2019 16:14 к комментариям - к полной версии - понравилось!

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

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

С помощью 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

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

Дневник Без заголовка | yankaivan - Дневник yankaivan | Лента друзей yankaivan / Полная версия Добавить в друзья Страницы: раньше»