При создании веб-страниц очень популярно использовать теги для отображения объявлений. Теги с закругленными углами имеют преимущества красивого стиля и яркого выражения. Как правило, мы превращаем фон тега с закругленными углами в изображение. это если количество слов в тексте метки изменится (как показано на рисунке 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; фон: URL (tab_bg.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. Этот метод требует только загрузки фонового изображения, что решает проблему несинхронного отображения фона на обеих сторонах этикетки. Однако, если количество слов в метке превышает ширину фонового изображения, возникнут проблемы. (как показано на рисунке 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; background:url(tab_left.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. Этот метод позволяет добиться произвольного эффекта расширения.