Рамочки с закруглёнными углами.Юлия_Гурбер

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

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

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

Или такую:

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

Тогда смотрим и берём на заметку. [more= Смотрим дальше] За основу возьмём самые простые стили — Выпуклая рамка:

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

Вот её код:

<center><div style="border: 8px ridge #33CCCC;padding:10px; width: 500px; font-family: Georgia; font-size: 20px; font-style: italic; color:#000000;">Здесь будет ваш текст</div></center>

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

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

Код:

<center><div style="border: 5px dotted #CC33CC; padding:10px; width: 500px; font-family: Georgia; font-size: 20px; font-style: italic; color:#000000;">Здесь будет ваш текст</div></center>

Теперь в строку кода любой из рамок после одного из знаков (;) вписываем атрибуты: 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 — цвет. Подготовила Ю. Гурбер[/more]