Stfw.RuКак создать рамку со скругленными уголками без изображений?
🕛 19.01.2009, 23:14
Хотя изображения достаточно успешно применяются для создания скругленных уголков в рамках, стилями порой делать это удобнее. Во-первых, через стили можно легко изменить цвет рамки без редактирования картинок. И, во-вторых, рамки без рисунков всегда отображаются в браузерах одинаково, независимо от того, выключен показ картинок или нет.
Любое закругление образуется за счет смещения определенных пикселов в углу прямоугольной рамки. Если увеличить фрагмент левого верхнего уголка рисунка рамки толщиной один пиксел и радиусом скругления три пиксела (рис. 1), то это смещение становится хорошо заметно.
Рис. 1. Увеличенный фрагмент уголка
Для создания подобной рамки потребуется три слоя высотой 1-2 пиксела, который накладываются друг на друга. Опишем их характеристики глядя на рис. 1.
Слой 1 - высота один пиксел, отступ четыре пиксела.
Слой 2 - ширина границы два пиксела, высота один пиксел, отступ два пиксела.
Слой 3 - ширина границы один пиксел, высота два пиксела, отступ один пиксел.
Высота слоя задается атрибутом height, граница слева через border-left, справа - border-right. Чтобы обеспечить смещение этих слоев, к их стилям следует добавить атрибут margin со значением, равным величине смещения, как показано в примере 1.
Пример 1. Создание скругленной рамки
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"> .d1, .d2, .d3 { display: block; /* Блочный элемент */ font-size: 0; /* Размер шрифта */ line-height: 1px; /* Для браузера IE6 */ height: 1px; /* Высота блока в один пиксел */ } .d2, .d3, .dialog-round div { border-left: 1px solid #666; /* Граница слева */ border-right: 1px solid #666; /* Граница справа */ } .d1 { margin: 0 4px; background: #666; } .d2 { margin: 0 2px; border-width: 2px; } .d3 { margin: 0 1px; height: 2px; } .dialog-round div { padding: 5px 10px; /* Отступы по горизонтали и вертикали */ } </style> </head> <body> <div class="dialog-round"> <b class="d1"> </b><b class="d2"> </b><b class="d3"> </b> <div> На улицах и пустырях мальчики запускают воздушных змеев, а девочки играют деревянными ракетками с многоцветными рисунками в ханэ. </div> <b class="d3"> </b><b class="d2"> </b><b class="d1"> </b> </div> </body>
</html>Три слоя создающие скругление добавляются с первого по третий в начале блока и с третьего по первый - в его конце. Граница слева и справа также добавляется к слою с текстом. Результат примера показан на рис. 2.
Рис. 2. Рамка со скругленными уголками
Удобство приведенного метода создания рамки состоит в простоте изменения цвета рамки и фона блока. После небольшой модификации примера 1 понадобится задать цвет в двух местах. В примере 2 используется белый цвет рамки (#fff), который хорошо заметен на темном фоне веб-страницы.
Пример 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"> BODY { background: #7e7166; /* Цвет фона веб-страницы */ } .d1, .d2, .d3 { display: block; font-size: 0; line-height: 1px; height: 1px; } .d2, .d3, .dialog-round div { border: 1px solid #fff; /* Параметры рамки */ border-top: none; border-bottom: none; /* Убираем границу сверху и снизу */ background: #fc0; /* Цвет фона блока */ } .d1 { margin: 0 4px; background: #fff; } .d2 { margin: 0 2px; border-width: 2px; } .d3 { margin: 0 1px; height: 2px; } .dialog-round div { padding: 5px 10px; } </style> </head> <body> <div class="dialog-round"> <b class="d1"> </b><b class="d2"> </b><b class="d3"> </b> <div> На улицах и пустырях мальчики запускают воздушных змеев, а девочки играют деревянными ракетками с многоцветными рисунками в ханэ. </div> <b class="d3"> </b><b class="d2"> </b><b class="d1"> </b> </div> </body>
</html>Результат данного примера показан на рис. 3.
Рис. 3. Рамка со скругленными уголками на темном фоне
Приведем также стиль для создания рамки толщиной два пиксела, который может пригодиться в тех случаях, когда толщины в один пиксел бывает недостаточно (пример 3). При этом HTML-код останется прежним.
Пример 3. Стиль для рамки толщиной два пиксела
<style type="text/css"> .d1, .d2, .d3 { display: block; font-size: 0; line-height: 1px; height: 1px; } .d2, .d3, .dialog-round div { border: 2px solid #666; /* Параметры рамки */ border-top: none; border-bottom: none; /* Убираем границу сверху и снизу */ } .d1 { margin: 0 3px; background: #666; } .d2 { margin: 0 1px; border-width: 2px; background: #666; } .d3 { margin: 0 1px; height: 1px; } .dialog-round div { padding: 5px 10px; }
</style>