圖1
描邊圓角標簽
如圖1所示,圓角標簽的邊緣和背景顏色不同,首先我們需要在photoshop中制作一張背景圖片(如圖2),圖片寬度要比可能出現的文字長度稍寬,高度至少等于標簽實際高度,邊緣設置為描邊顏色,內部為透明,但是圓角以外的區域不能設置為透明,應該用頁面背景顏色填充,這里使用的是白色,我們將其命名為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>首頁</span></a> <a href="#" class="tab"><span>個人資料</span></a> <a href="#" class="tab"><span>留言本</span></a> </body> |
|
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) 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.此種方法可以達到任意擴展的效果。
40個可愛粉色兒童房設計裝修設計2018-04-22
100款國外食品包裝設計集包裝設計2017-07-17
40幅日本海報設計作品海報設計2017-07-04
46款茶品牌和包裝設計欣賞包裝設計2017-04-14
20款現代簡約風格名片設計名片設計2016-04-18
59款日本優秀logo設計欣賞標志設計2016-03-29
10個CSS簡寫/優化技巧CSS教程2013-06-04
css的margin縮寫方式CSS教程2012-05-23
CSS網頁布局時常犯的幾種CSS教程2009-09-28
CSS浮動屬性Float詳解CSS教程2009-09-17
CSS定位屬性Position詳解CSS教程2009-09-17
CSS布局教程:絕對定位和相CSS教程2009-07-15