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

Понедельник, 15 Июня 2015 г. 17:05 + в цитатник

Цитата сообщения Юлия_Гурбер

Прочитать целиком В свой цитатник или сообщество!

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

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

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

Рубрики:

УРОКИ
С КОМПьЮТЕРОМ НА ""ТЫ"