Я приветствую вас. Кажется, на страницах своего блога я еще не описывал, как делаются в css декоративные рамки, а раз так, то это тема моей сегодняшней статьи.
Отлично, чтобы начать, нам нужен реквизит, так сказать 
Сегодня в качестве реквизита выступит моя фотография и фотка декоративной рамки. Вот они:
Тут я в четвертом классе, это было примерно 10 лет назад. Я был отличником учебы на тот момент, поэтому меня фотографировали для доски почета школы, по-моему. Короче, сейчас мы, что называется, в прямом эфире сделаем рамку для этой фотографии.
Делаем саму рамку
О разметке говорить нечего, там всего лишь изображение:
<img class = "photo" src = "photo.jpg">
А вот о css-коде, который и сделает все дело, стоит рассказать подробнее:
.photo{
display: block;
border: 30px solid red;
border-image: url(border1.png) 30 repeat;
}
Во-первых, сделаем изображение блочным, чтобы к нему можно было применить рамку. Во-вторых, обязательно нужно указать стандартную рамку. Вы должны прописать ей такую толщину, какой толщины хотите видеть декоративную рамку. Стиль и цвет особо нам не важны, так как их все равно не будет видно, но все равно их нужно прописать.
Следующая строка кода самая важная для нас — это задание самой рамки. Как видите, это делается практически также, как и задание фона в css — с помощью слова url и пути к изображению. Следующим параметром нужно прописать толщину рамки вновь, но без px, просто числом. Посдений параметр — тип повторения. Тут есть 3 значения:
- repeat — рисунок сторон рамки будет повторяться, если по размерам меньше элемента, к которому применяется.
- stretch — рисунок будет растягиваться. Если размеры рамки меньше элемента, из-за этого может быть ухудшение качества.
- round — повторение рисунка таким образом, чтобы поместилось целое число повторений.
Честно, тут трудно объяснить все на словах. Лучше попрактикуйтесь, попробуйте прописывать поочередно все значения для рамок и быстро разберетесь, как они работают.
Вот что у нас получилось:
Для лучшего понимания
Вы намного быстрее сможете разобраться с декоративными рамками, если потренируетесь с помощью этого сайта. Тут вы можете загрузить свое изображение рамки, задавать разную толщину сторон, размеры, повторение и т.д.
Также учитывайте, что это свойство из css3, поэтому для его кроссбраузерного отображения его необходимо писать со всеми вендорыми префиксами. Подробнее о префиксах тут.
А как сделать круглую рамку?
Учитывайте, что свойство border-radius сможет закруглить только саму картинку, но ни в коем случае не рамку. Просто border-radius действует только на обычные сплошные рамки, но не на декоративные.
Соответственно, ваш единственный выход — изначально найти в интернете круглую рамку.