CSS教程:可擴(kuò)展圓角標(biāo)簽的實(shí)現(xiàn)方法

2024-07-11 08:23:48

字體：大中小

供稿：網(wǎng)友

　在制作網(wǎng)頁(yè)的時(shí)候，很流行使用標(biāo)簽的方式進(jìn)行分類(lèi)顯示，圓角標(biāo)簽具有樣式美觀、表現(xiàn)方式形象的優(yōu)點(diǎn)，一般我們都會(huì)將圓角標(biāo)簽的背景制作成一張圖片，這樣做的不足之處是假如標(biāo)簽文字字?jǐn)?shù)變化（如圖1），固定的背景圖片不能隨之進(jìn)行擴(kuò)展。這樣我們就需要制作很多張不同寬度的背景圖片，很不方便。下面介紹兩種制作可擴(kuò)展圓角標(biāo)簽的方法。

圖1 描邊圓角標(biāo)簽

　　如圖1所示，圓角標(biāo)簽的邊緣和背景顏色不同，首先我們需要在photoshop中制作一張背景圖片（如圖2），圖片寬度要比可能出現(xiàn)的文字長(zhǎng)度稍寬，高度至少等于標(biāo)簽實(shí)際高度，邊緣設(shè)置為描邊顏色，內(nèi)部為透明，但是圓角以外的區(qū)域不能設(shè)置為透明，應(yīng)該用頁(yè)面背景顏色填充，這里使用的是白色，我們將其命名為tab_bg.gif。

圖2
代碼如下：

以下是引用片段：
<style type="text/css">
a.tab{ float:left; margin:10px; padding-right:10px; background:#4B90C6 url(tab_bg.gif) right top no-repeat; font:bold 14px/30px 'Verdana'; color:#FFF;}
a.tab span{ padding-left:10px; background:url(tab_bg.gif) no-repeat; display:block;}
</style>

<body bgcolor="#FFFFFF">
<a href="#" class="tab"><span>首頁(yè)</span></a>
<a href="#" class="tab"><span>個(gè)人資料</span></a>
<a href="#" class="tab"><span>留言本</span></a>
</body>

　　代碼說(shuō)明：

　　1.實(shí)現(xiàn)思路是給<a>標(biāo)簽設(shè)置標(biāo)簽右側(cè)背景，給<span>標(biāo)簽設(shè)置標(biāo)簽左側(cè)背景來(lái)實(shí)現(xiàn)圓角標(biāo)簽的擴(kuò)展；
　　2.這種方法只需要下載一張背景圖片，解決了標(biāo)簽兩側(cè)背景顯示不同步的問(wèn)題，但是假如標(biāo)簽內(nèi)的字?jǐn)?shù)超過(guò)了背景圖片的寬度，就會(huì)出現(xiàn)問(wèn)題（如圖3），所以在制作背景圖片的時(shí)候，圖片寬度應(yīng)盡可能的考慮到最長(zhǎng)的字符寬度。

圖3 單色圓角標(biāo)簽
　　上面一種情況由于需要實(shí)現(xiàn)描邊效果，所以文字只能在背景寬度之內(nèi)擴(kuò)展，有一定的局限性。假如是單色的圓角標(biāo)簽就可以實(shí)現(xiàn)完全擴(kuò)展（如圖4）。

圖4
　　將第一次用到的背景圖片左側(cè)和右側(cè)分別切成背景圖片（如圖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">

代碼說(shuō)明：
　　1.對(duì)<a>和<span>使用了不同的背景，并將鏈接背景色設(shè)置為描邊顏色，達(dá)到單色標(biāo)簽效果；
　　2.此種方法可以達(dá)到任意擴(kuò)展的效果。

上一篇：CSShacks：瀏覽器特定選擇器介紹

下一篇：CSS:瀏覽器特定選擇器介紹