Рамка вокруг изображения.Юлия_Гурбер

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

Вариант 1

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

[more= Смотрим дальше]

Вариант 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>

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