Предварительно в графическом редакторе готовим изображение, на котором будет выводиться текст (рис. 1). Если предполагается, что цвет фона страницы будет меняться, то для картинки следует задать прозрачность.
Ширина изображения может быть сделана с запасом, чтобы через стили задавать ширину блока, а высота останется неизменной. Особенностью метода являются фиксированные размеры блока.
Рисунок отображается достаточно стандартно - в виде фоновой картинки при помощи атрибута background добавляемого к селектору P. Чтобы фон не повторялся, ставится значение no-repeat. Закругление справа от блока также добавляется в виде фона, но уже для тега <SPAN>, находящегося внутри тега <P>. При этом фон для вложенного элемента необходимо позиционировать относительно правого края через атрибут background-position. В результате произойдет наложение фона друг на друга (рис. 2).
Теперь нам предстоит сделать финт и сдвинуть фон тега <SPAN> вправо. Для этой цели задаем тегу <SPAN> относительное позиционирование (значение relative атрибута position) и сдвиг (атрибут left). Значение left равно ширине закругления на рис. 1. Одновременно left повлияет и на вложенный текст, он также окажется смещенным по горизонтали вправо. Чтобы вернуть его на место, добавим к стилям атрибут text-indent со значением, равным значению атрибута left. Окончательно выравниваем текст по вертикали через padding, как показано в примере 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"> p.address, p.address span { background: url(images/roundbg.png) no-repeat; /* Путь к изображению */ height: 36px; /* Высота блока */ width: 150px; /* Ширина блока */ text-align: center; /* Выравнивание по центру */ } p.address span { display: block; /* Блочный элемент */ background-position: 100% 0; /* Положение фона */ position: relative; /* Относительное позиционирование */ left: 17px; /* Сдвигаем вправо */ padding: 6px 0; /* Поля вокруг текста */ text-indent: -17px; /* Сдвигаем текст влево */ } </style> </head> <body> <p class="address"><span>ул. Могильщиков, 66</span></p> </body>
</html>