Декоративные рамки

Возможно, кто-то из вас задавался вопросом – “Как сделать рамку в виде картинки или из картинки?” Это очень просто!



Мы будем пользоваться свойством border-image. С помощью этого свойства легко управлять рамкой. Заранее следует найти или сделать нужную картинку. Она представляет собой квадрат с 4-мя сторонами и 4-мя углами, центр рамки должен быть прозрачным. Рисунок сторон должен быть одинаков.

Чтобы наша рамка отображалась правильно, нужно сделать несколько замеров: ширина левой и правой границы, высота верхней и нижней границы. Размер можно указывать в процентах и в пикселях, что намного проще и удобней. У меня размеры границ такие – 30px, 30px, 30px, 30px. Порядок записи размеров – высота верхней границы, ширина правой границы, высота нижней границы и ширина левой границы.

Всё, размеры рамки известны, картинка рамки – есть. Теперь перейдем к стилям и коду. Вот так выглядит мой код:












Разбираем параметры (для тех кто не знает):
border – тут указывается ширина, тип, цвет.
min-height – минимальная высота рамки.
padding – отступ рамки от текста со всех сторон.
url(images/border.png) 30 30 30 30 repeat - относительный адрес к картинки, размеры, способ повторения рамки. Существует три способа: stretch, repeat, round. Стандартное значение – stretch. Safari и Chrome не поддерживают значение round и заменяют его на repeat.