Обрамление текста или изображения оригинальной рамкой

                При изложении какого-то материала на страницах сайта или блога иногда возникает необходимость как-то выделить часть текста или обрамить изображение, а если это обрамление сделать особым оригинальным, то оно будет приятно смотреться. Многие создают для этих целей всевозможные варианты рамок в графических редакторах и используют эти РИСУНКИ в качестве фона для выделяемого текста.
            Посредством команды border-radius (закругление углов обрамления в CSS), указав одно из четырех значений для каждого угла рамки поочередно, можно задать закругления любого радиуса, что дает возможность создать неповторимую оригинальную рамку вокруг текста или изображения, определить фон блока внутри рамки, а добавление команды shadow отделяет созданный блок тенью. Цвет и размеры рамки и тени, фон блока (цвет или рисунок) легко поменять установив желаемые значения в коде CSS.
           Этот способ создания рамок не загружает web-страницу изображениями - значит не замедляет время загрузки.

Некоторые варианты обрамления текста или изображений

ФОН ОПРЕДЕЛЕННОГО ЦВЕТА ПРОЗРАЧНЫЙ ФОН ИЗОБРАЖЕНИЕ В КАЧЕСТВЕ ФОНА ТЕКСТОВАЯ ССЫЛКА ГРАФИЧЕСКАЯ ССЫЛКА

Чтобы создать такие рамки, используйте изложенные ниже коды CSS и HTML:

          1.Этот код CSS следует вставить на страницу между тегами head

<style>
.krug {
width: 300px; /* ширина блока */
font-weight: bold; /* тип текста */
padding: 20px; /* отступ текста от краев */
margin: 30px 0 10px 0; /* отступы от края элемента */
border: 2px solid #000; /* цвет и толщина рамки */
box-shadow:10px 10px 15px #999999; /* цвет и толщина тени */
}
.krug1 {
background-color:#FFD4A0;
border-radius: 10px 0 20px 30px;
}
.krug2 {
border-radius: 10px 10px 10px 10px;
}
.krug3 {
background-image: url("http://img-fotki.yandex.ru/get/4808/svoi-ivanov.3/0_59b9d_b2f30154_XS.jpg");
border-radius: 30px 15px 0;
}
.krug4 {
background-color:#E7E7E7;
border-radius: 4em 0;
}
.krug5 {
background-color:#FFFF00;
border-radius: 50%;
}
</style>

            2.Эти коды HTML вставляем на страницу между тегами body

<div class="krug krug1"> ФОН ОПРЕДЕЛЕННОГО ЦВЕТА </div>

<div class="krug krug2"> ПРОЗРАЧНЫЙ ФОН </div>

<div class="krug krug3"> ИЗОБРАЖЕНИЕ В КАЧЕСТВЕ ФОНА </div>

<div class="krug krug4><a href=" …URL ссылки..."> ТЕКСТОВАЯ ССЫЛКА </a></div>

<div class="krug krug5"><a href=" URL ссылки "><img src=" URL изображения " ></a></div>

            Подробности на странице: Создание гиперссылок.

            Из представленных способов обрамления (.krug1-5) выберите понравившиеся для использования, а остальные удалите,чтобы не загромождать страницу.

КОД ЛЮБОГО ЦВЕТА ВЫ МОЖЕТЕ ВЫБРАТЬ ЗДЕСЬ
...Дерзайте...

---