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

2020-05-11 18:16:49易采站长站整理

图5

代码如下:

以下是引用片段:
<styletype="text/css">
a.tab{float:left;margin:10px;padding-right:10px;background:#033EA5url(tab_right.gif)righttopno-repeat;font:bold14px/30px’Verdana’;color:#FFF;}
a.tabspan{padding-left:10px;background:url(tab_left.gif)no-repeat;display:block;}
</style>
<bodybgcolor="#FFFFFF">
<ahref="#"class="tab"><span>首页</span></a>
<ahref="#"class="tab"><span>个人资料</span></a>
<ahref="#"class="tab"><span>留言本</span></a>
</body>

代码说明:

  1.对<a>和<span>使用了不同的背景,并将链接背景色设置为描边颜色,达到单色标签效果;

  2.此种方法可以达到任意扩展的效果。