昨天群里大家讨论到一个豆瓣上的按钮，下面这个。在这里用到了不同宽度的按钮，但是只是用到了一个图片。
演示地址：http://5key.net/demo/liquid-css-menu/
先来看张图片：
原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。再通过hover标签去滑动图片。ok，看看代码吧。
*{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(1.gif) left 0; color:#fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;} a:hover{background:url(1.gif) left -30px;height:30px;} a span{background:url(1.gif) right 0; padding:9px 8px 5px 0; margin:0 0 0 8px; float:left; height:16px;}
a:hover span{background:url(1.gif) right -30px; color:#000; padding:9px 8px 5px 0; margin:0 0 0 8px; height:16px; }
<h1>CSS自适应宽度圆角按钮 @5key.net</h1>
<a href=”#”><span>首页</span></a>
<a href=”#”><span>不是首页</span></a>
<a href=”#”><span>他也许是首页</span></a>
<a href=”#”><span>但他一定不是首页</span></a>
<a href=”#”><span>好了，就这样把。别扯了~</span></a>
谢谢收下了 [lol]
如果把图片弄成透明背景的，还可以做到换颜色~
呵呵。。。确实
如果文字超过背景图片的宽度，圆角背景就乱了。
这里我只是做了一个小的测试。这个图片你可以无限长。
当然，我们只需要一个相对比较大的值就行。毕竟按钮也不会是很长的文字
这个按钮的方法最早好像在客齐集的头部按钮中就是这样做了!以前参考过!很方便!
这个东西很好玩啊~太帅了哦~
[cool] 哦~原来是这样啊!原来是多了个span..不用就不行了..看来不是太实用啊.. [rolleyes]
douban天天上，觉得这个按钮设计的不错。
dddddd
http://www.dynamicdrive.com/
这里很有用的，常去看看吧。国内的都是从外国学回来的。
这个以后估计会成为使用圆角按钮的标准配置 [smile]
Pingback: » CSS切换图片效果 5key.net
为啥一定是float呢?
不太明白~~
A标签是内联元素。宽、高边距等属性不能设置
float则可以使其脱离普通文档流，定义宽高等属性
这种方式挺灵活的！～！我们也常用的！呵呵！～！
这样做挺灵活的！～！我也常用！～呵呵！～！各有利弊吧！～！比如所需尺寸比较多的时候就适合用你的办法了！～！～
很灵活，应该是滑动门技术的另外一种应用。学习了…….
Pingback: 自适应的标题 | 5key’s blog
非常有用，收藏