Как делается в css двойная рамка?

Как делать в css двойную рамку? Небольшая заметка об этом. Дело в том, что это не сделаешь с помощью обычного border, тут нужно идти другим путем. Вернее, сделать то можно, написав слово double вместо solid при указании типа рамки, но такое решение не будет гибким.

Если вы задаете рамку с помощью свойства border, то можете задать ее только одну. Но очень часто по дизайну может требоваться несколько рамок. В таком случае стоит воспользоваться псевдорамкой — тенью.

Двойная рамка с помощью box-shadow

Вообще если вы хотите подробнее изучить тень в css, то советую вам прочитать мою статью на соответствующую тему. В этой статье я не буду подробно объяснять синтаксис свойства, а просто покажу прием, как создать двойную рамку. Итак, создам обыкновенный блок, которому пропишу некоторые стили. Блок может быть любым и с любым содержимым. В моем случае это простой div, поэтому html код я даже не буду показывать. А вот стили:

div{
    background: #E0D8A3;
    width: 180px;
    height: 110px;
    padding: 12px;
}
блок

Ну типичный пример оформления блока. Теперь создадим двойную рамку с помощью множественных теней. Добавлю в стили к блоку еще такое свойство:

div{
    box-shadow: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;
}

Вот так это выглядит:

двойная рамка

Как видите, получилось достаточно симпатично. В box-shadow всего 5 параметров. Первый — смещение тени по горизонтали, второй — по вертикали. Третий и четвертый параметры — размытие и растяжение. Как видите, первые три мы не трогаем вообще. Размытие нам не нужно, потому что нам нужна резкая тень. Как видите, я прописывал четвертый параметр — растяжение. Он определяет, насколько тень будет больше элемента, к которому привязана.

По умолчанию все выглядит так — тень одинаковых размеров с элементом и лежит четко под ним. Если вы меняете растяжение, то тень начинает выступать за элемент. Именно так можно создавать рамки, абсолютно такие же, как свойством border. Ну а с пятым параметром, я думаю, все понятно — это цвет тени.

Как видите, я просто перечислил параметры для каждой новой тени через запятую. Я думаю, вы уже догадались, что таким же способом можно создать тройную рамку и т.д. Никаких ограничений тут нет. Собственно, как по мне вопрос закрыт, а если у вас есть какие-то вопросы, вы можете писать их в комментарии.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий