当前位置 :| 主页>CSS实例>

CSS自适应宽度圆角按钮

来源：cssplay 作者：cssplay 时间：2008-04-02 点击：

昨天群里大家讨论到一个豆瓣上的按钮，下面这个。在这里用到了不同宽度的按钮，但是只是用到了一个图片。

CSS自适应宽度圆角按钮

先来看张图片：

CSS自适应宽度圆角按钮

原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。再通过hover标签去滑动图片。ok，看看代码吧。

运行代码框如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS自适应宽度圆角按钮 @cssplay.org.cn</title> <style> *{margin:0; padding:0;} body{padding:10px; font-size:12px;} h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;} a{background:url(http://www.cssplay.org.cn/uploads/allimg/080405/1229270.gif) left 0; color:#fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;} a:hover{background:url(http://www.cssplay.org.cn/uploads/allimg/080405/1229270.gif) left -30px;height:30px;} a span{background:url(http://www.cssplay.org.cn/uploads/allimg/080405/1229270.gif) right 0; padding:9px 8px 5px 0; margin:0 0 0 8px; float:left; height:16px;} a:hover span{background:url(http://www.cssplay.org.cn/uploads/allimg/080405/1229270.gif) right -30px; color:#000; padding:9px 8px 5px 0; margin:0 0 0 8px; height:16px; } </style> </head> <body> <h1><strong>CSS自适应宽度圆角按钮 @cssplay.org.cn</strong></h1> <a href="#" _fcksavedurl="#"><span>首页</span></a> <a href="#" _fcksavedurl="#"><span>不是首页</span></a> <a href="#" _fcksavedurl="#"><span>他也许是首页</span></a> <a href="#" _fcksavedurl="#"><span>但他一定不是首页</span></a> <a href="#" _fcksavedurl="#"><span>好了，就这样把。别扯了~</span></a> </body> </html>
提示：您可以先修改部分代码再运行

Tag：css 自适应宽度 圆角按钮 CSS实例

[收藏] [推荐] [评论] [打印] [关闭]

顶一下

上一篇：用CSS代码轻松DIY你的网页滚动条
下一篇：CSS自适应宽度标题

最新评论共有 0 位网友发表了评论

查看所有评论

发表评论

栏目列表

热点实例