Рамочки с закруглёнными углами
Хотите за 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; - подставляем любое значение.
Подготовила Ю. Гурбер