Stfw.RuКак сделать рамку со скругленными уголками?
🕛 19.01.2009, 23:17
Для создания рамки вокруг блока используется стилевой атрибут border, в качестве значения которого задается толщина, стиль и цвет линии. Если поверх такой линии наложить графические уголки, то мы убьем двух зайцев - получим нужные закругления и сохраним границу, которую можно увидеть даже при отключении картинок.
Вначале рисуем рамку в графическом редакторе (рис. 1). В нашем случае она имеет толщину два пиксела и серый цвет (#808080).
Рис. 1. Рамка на прозрачном фоне
Внутри рамка должна быть обязательно прозрачной, тогда можно будет задавать блоку желаемый цвет, а фон под уголками должен совпадать с цветом фона. Как показано на рис. 1 он белый.
Поскольку на рисунке нас интересуют только уголки, то для сайта изображение следует изменить - вырезать уголки и разместить их рядом по горизонтали или вертикали (рис. 2).
Рис. 2. Изображения для публикации
Увеличенный рисунок с уголками на прозрачном фоне представлен на рис. 3. Сверху вниз располагаются уголки: левый верхний, правый верхний, левый нижний и правый нижний.
Рис. 3. Увеличенное изображение уголков
После того, как рисунок подготовлен, пора переходить к коду. Для создания уголков нам потребуется четыре элемента, в их качестве можно использовать теги <EM>, <B>, <STRONG>, <SPAN> и другие, для удобства вкладывая их один в другой. Для верхних уголков заведем класс с именем bt, а для нижних - класс bb (пример 1).
Пример 1. Код для создания блока
<div class="color_block"> <em class="bt"><b> </b></em> <div class="block_content"> Содержимое </div> <em class="bb"><b> </b></em>
</div>В стилях к блоку добавляем рамку через атрибут border, а вывод уголков делаем через универсальный атрибут background. Рамка отображается вокруг блока, поэтому фоновый рисунок окажется внутри границы. Так что придется сдвигать фон на толщину линии через атрибуты top и left, предварительно установив относительное позиционирование (пример 2).
Пример 2. Добавление закруглений через один рисунок
HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Закругленные уголки</title> <style type="text/css"> .color_block { border: 2px #808080 solid; /* Параметры рамки */ background: #e3ffec; /* Цвет фона */ } em.bt, em.bt b, em.bb, em.bb b { display: block; /* Блочный элемент */ height: 10px; /* Высота уголка */ font-size: 0; /* Размер шрифта */ background: url(images/corner.png) no-repeat; /* Путь к файлу с уголками */ position: relative; /* Относительное позиционирование */ } em.bt { top: -2px; /* Сдвигаем левый верхний уголок вверх */ left: -2px; /* Сдвигаем влево */ } em.bt b { background-position: 100% -10px; /* Рисунок сдвигается к следующему уголку */ left: 4px; /* Сдвигаем вправо */ } em.bb { background-position: 0 -20px; top: 2px; left: -2px; } em.bb b { background-position: 100% -30px; left: 4px; } .color_block .block_content { padding: 0 7px; /* Поля вокруг текста */ } </style> </head> <body>
<div class="color_block"> <em class="bt"><b> </b></em> <div class="block_content"> Чтобы изготовить пугало для горного поля, делают фигуру человека, который держит в руках лук и стрелы. Птицы и звери видят его и убегают. И хотя у пугала нет никаких намерений, олень не подойдет к нему близко. Так пугало выполняет свое назначение, и поэтому говорят, что оно стоит в горном поле не напрасно. </div> <em class="bb"><b> </b></em> </div>
</body>
</html>Результат данного примера показан на рис. 4.
Обратите внимание на следующие моменты. Сам рисунок с уголками в виде фона выводится только один раз и далее для определенных элементов меняет свою позицию через атрибут background-position. Так как высота блока ограничена значением height, то увидеть весь рисунок целиком нельзя, поэтому мы видим нужный нам фрагмент. Для вложенных тегов <B> сдвигать рисунок приходится с учетом смещения его родителя, поэтому в качестве значения left выступает удвоенная толщина границы.