CSS教程:可扩展圆角标签的实现方法

作者佚名技术来源 CSS技术浏览发布时间 2012-03-05

　上面一种情况由于需要实现描边效果，所以文字只能在背景宽度之内扩展，有一定的局限性。如果是单色的圆角标签就可以实现完全扩展（如图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) right top no-repeat; font:bold 14px/30px ''Verdana''; color:#FFF;}
a.tab span{ padding-left:10px; background:url(tab_left.gif) no-repeat; display:block;}
</style>

<body bgcolor="#FFFFFF">
<a href="#" class="tab"><span>首页</span></a>
<a href="#" class="tab"><span>个人资料</span></a>
<a href="#" class="tab"><span>留言本</span></a>
</body>

代码说明：
　　1.对<a>和<span>使用了不同的背景，并将链接背景色设置为描边颜色，达到单色标签效果；
　　2.此种方法可以达到任意扩展的效果。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2

分享到：更多

你可能对下面的文章感兴趣

上一篇: 有趣的Unicode CSS类命名方式下一篇: CSS解决文字环绕图片问题

关于CSS教程:可扩展圆角标签的实现方法的所有评论

随机推荐