css立體按鈕效果
本程式碼例項實現了立體按鈕效果。
並不是使用css3實現,而是利用邊框造成視覺上的錯覺而實現。
更多css3按鈕效果可以參閱CSS3立體按鈕效果一章節。
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .navigation { text-align: center; font-family: Arial,Helvetica,sans-serif; font-size: 16px; line-height: 24px; } .navigation ul { list-style-type: none; padding: 0; margin: 0; padding-top: 4px; } .navigation li { display: inline-block; } .navigation a:link, .navigation a:visited { margin-left: 2px; padding: 3px 10px 2px 10px; color: #A62020; background-color: #FCE6EA; text-decoration: none; border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } .navigation a:hover { border-top: 1px solid #717171; border-left: 1px solid #717171; border-bottom: 1px solid #fff; border-right: 1px solid #fff; } </style> </head> <body> <div class="navigation"> <ul> <li><a href="">螞蟻部落一</a></li> <li><a href="">螞蟻部落二</a></li> <li><a href="">螞蟻部落三</a></li> <li><a href="">螞蟻部落四</a></li> </ul> </div> </body> </html>
相關文章
- CSS3簡單圓角立體按鈕效果CSSS3
- CSS3 3D立體按鈕CSSS33D
- css3實現的滑鼠懸浮立體動態按鈕效果CSSS3
- CSS 叉號按鈕效果CSS
- CSS3動畫按鈕效果CSSS3動畫
- css實現圓角按鈕效果CSS
- css叉號關閉按鈕效果CSS
- CSS3 checkbox開關按鈕效果CSSS3
- CSS3滑鼠懸浮動畫按鈕效果CSSS3動畫
- 每日CSS_霓虹燈按鈕懸停效果CSS
- CSS3滑動開關按鈕效果CSSS3
- CSS3叉號按鈕效果詳解CSSS3
- 超炫酷3D立體的CSS3彈性按鈕3DCSSS3
- CSS 文字立體凸起效果CSS
- 利用css變數實現按鈕懸浮效果CSS變數
- CSS3滑鼠懸浮交叉線效果按鈕CSSS3
- div按鈕CSSCSS
- css立體效果程式碼例項CSS
- CSS3提交按鈕等待打點迴圈效果CSSS3
- CSS3 radio單選按鈕美化效果CSSS3
- CSS3模擬實現iphone返回按鈕效果CSSS3iPhone
- 按鈕滾動條效果
- css3實現的滑鼠懸浮按鈕動畫效果CSSS3動畫
- css3實現的美觀的提交按鈕效果CSSS3
- 美妙的 CSS3 動畫!夢幻般的按鈕效果CSSS3動畫
- CSS3 文字立體凸起效果CSSS3
- CSS3 文字立體翻轉效果CSSS3
- css3實現button按鈕美化效果程式碼例項CSSS3
- CSS按鈕垂直水平居中CSS
- 精選10款CSS3實現的酷炫按鈕效果CSSS3
- 單選按鈕美化效果程式碼
- CSS開關按鈕三例CSS
- css3實現的立體滾動效果CSSS3
- 窗體(文字框,按鈕,單選按鈕,標籤)
- css實現立體效果橫向導航選單CSS
- JavaScript點選按鈕彈出層效果JavaScript
- radio單選按鈕美化效果
- SVG 帶有過渡效果的按鈕SVG