Рамочки с закруглёнными углами

Воскресенье, 14 Октября 2018 г. 21:18 + в цитатник

Цитата сообщения Юлия_Гурбер

Прочитать целиком В свой цитатник или сообщество!

Рамочки с закруглёнными углами

Хотите за 5 минут собрать простенькую, но очень симпатичную рамку
для текста? Например, такую:

Здесь будет ваш текст
-------

Или такую:

Здесь будет ваш текст
-------

Тогда смотрим и берём на заметку.

За основу возьмём самые простые стили — Выпуклая рамка:

Здесь будет ваш текст

Вот её код:

Точечная рамка:

Здесь будет ваш текст

Код:

Теперь в строку кода любой из рамок после одного из знаков (;) вписываем атрибуты:

background: #F8E1D8; — задаёт цвет фона записи.
Для наглядности я оставила код цвета, вы замените его на любой другой.

border-radius: 30px; — задаёт радиус закругления всех 4-х углов.
Вместо "30" подставите нужное вам число, например: 8px, 16px, 32px.
Можно усложнить, чтоб рамочка имела закруглённые верхний левый угол
и нижний правый (как у первой рамки вверху поста):

border-top-left-radius: 32px;
border-top-right-radius: 0;
border-bottom-right-radius: 32px;
border-bottom-left-radius: 0;

Можем поменять местами закруглённые углы:

border-top-left-radius: 0;
border-top-right-radius: 32px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 32px;

В рамках стоит заданный размер ширины, который тоже можно менять:
width: 500px; — подставляем любое значение.

А это подсказка по готовым обводкам-бордюрам, данным в кодах:

border: 8px ridge #33CCCC; — бордюр выпуклой рамки, где 8px — его толщина, а #33CCCC — цвет.
border: 5px dotted #CC33CC; — бордюр точечной рамки, где 5px — толщина, а #CC33CC — цвет.

Подготовила Ю. Гурбер

Серия сообщений "Делаем рамки,комментики сами":
Часть 1 - Урок изготовления рамочки для текста
Часть 2 - Делаем очень красивую рамочку для текста за 5 минут
...
Часть 30 - Как вставить код любого изображения в аккуратную рамку (урок)
Часть 31 - Рамки с объемным фоном без фотошопа!
Часть 32 - Рамочки с закруглёнными углами
Часть 33 - Стильные рамки (блоки)
Часть 34 - Рамочки с разными краями
Часть 35 - Рамки, украшенные картинкой
Часть 36 - Набор цветных окошек для кодов