При создании веб-страниц очень популярно использовать теги для отображения объявлений. Теги с закругленными углами имеют преимущества красивого стиля и яркого выражения. Как правило, мы превращаем фон тега с закругленными углами в изображение. это если количество слов в тексте метки изменится (как показано на рисунке 1), фиксированное фоновое изображение не может быть соответствующим образом расширено. Таким образом нам нужно создать множество фоновых изображений разной ширины, что очень неудобно. Вот два способа изготовления расширяемых этикеток с закругленными углами.
Рис. 1.
Этикетка с закругленной чертой
Как показано на рисунке 1, край закругленной метки отличается от цвета фона. Сначала нам нужно создать фоновое изображение в фотошопе (рисунок 2). Ширина изображения немного шире, чем возможная длина текста. высота как минимум равна фактической метке. Высота, край установлен на цвет обводки, а внутренняя часть прозрачна, но область за пределами закругленных углов не может быть установлена прозрачной и должна быть заполнена цветом фона страницы. Здесь используется белый цвет, и мы называем его tab_bg.gif.
Рисунок 2
Код выглядит следующим образом:
Ниже приведен фрагмент в кавычках:
<style type="text/css">
a.tab{ float:left;margin:10px;padding-right:10px;background:#4B90C6 url(tab_bg.gif) справа вверху, без повтора; шрифт:жирный 14px/30px 'Verdana';}
a.tab span {padding-left:10px; background:url(tab_bg.gif) no-repeat;block;}
</стиль>
<body bgcolor="#FFFFFF">
<a href="#" class="tab"><span>Главная страница</span></a>
<a href="#" class="tab"><span>Профиль</span></a>
<a href="#" class="tab"><span>Гостевая книга</span></a>
</тело> |
Описание кода: 1. Идея реализации состоит в том, чтобы установить правый фон метки для тега <a> и установить левый фон метки для тега <span>, чтобы реализовать расширение закругленной метки;
2. Этот метод требует только загрузки фонового изображения, что решает проблему несинхронного отображения фона на обеих сторонах этикетки. Однако, если количество слов в метке превышает ширину фонового изображения, возникнут проблемы. (как показано на рисунке 3), поэтому при создании фонового изображения ширина изображения должна максимально учитывать ширину самого длинного символа.
Рисунок 3
Однотонная этикетка с закругленными углами
В приведенном выше случае, поскольку необходимо добиться эффекта обводки, текст можно расширить только в пределах ширины фона, что имеет определенные ограничения. Если это одноцветная этикетка с закругленными углами, ее можно полностью развернуть (рис. 4).
Рисунок 4
Вырежьте левую и правую стороны фонового изображения, используемого впервые, на фоновые изображения соответственно (как показано на рисунке 5) и назовите их tab_left.gif и tab_right.gif.
Рисунок 5
Код выглядит следующим образом:
Ниже приведен фрагмент в кавычках:
<style type="text/css">
a.tab{ float:left;margin:10px;padding-right:10px;background:#033EA5 url(tab_right.gif) справа вверху, без повтора; шрифт: жирный 14px/30px 'Verdana';}
a.tab span {padding-left: 10px; фон: URL (tab_left.gif) без повторения: блок;}
</стиль>
<body bgcolor="#FFFFFF">
<a href="#" class="tab"><span>Главная страница</span></a>
<a href="#" class="tab"><span>Профиль</span></a>
<a href="#" class="tab"><span>Гостевая книга</span></a>
</тело> |
Описание кода:
1. Используйте разные фоны для <a> и <span> и установите цвет фона ссылки на цвет обводки, чтобы добиться эффекта монохромной метки;
2. Этот метод позволяет добиться произвольного эффекта расширения.
