CSS自适应宽度圆角按钮

作者：dowhatyouwant 来源：5key.net 时间：2007-11-20 11:38:00　

本文介绍的圆角方法很特别，有创意。

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

先来看张图片：

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

*{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:7px 8px 7px 0; margin:0 0 0 8px; float:left; height:16px;}
a:hover span{background:url(1.gif) right -30px; color:#000; padding:7px 8px 7px 0; margin:0 0 0 8px; height:16px; }

HTML:

<body>
<h1>CSS自适应宽度圆角按钮 asp之家</h1>
<a href="#">首页</a>
<a href="#">不是首页</a>
<a href="#">他也许是首页</a>
<a href="#">但他一定不是首页</a>
<a href="#">好了，就这样把。别扯了~</a>
</body>

演示地址：

https://www.aspxhome.com/examples/design/css/237320/liquid-css-menu.htm

标签：圆角,css,自适应

投稿

CSS自适应宽度圆角按钮

猜你喜欢

如何操作Access数据库？

实例讲解实现SQL下的字符串拆分具体方法

详解php如何合并身份证正反面图片为一张图片

css中浮动思考与小结

Oracle使用PL/SQL操作COM对象

61条面向对象设计的经验原则

CSS文件的编码要和页面的编码相一致

在MySQL数据库中如何修改密码及访问限制

CSS的书写顺序规范

在JavaScript中，为什么要尽可能使用局部变量？

一些与网页密切相关的技术

ASP对FoxPro自由表(DBF文件)的操作

Oracle数据操作和控制语言详解

分支任务：从哪里来，回哪里去

完美的js验证网址url（正则表达式）

HTML编辑器FCKeditor使用详解

如何在Access报表中每隔N行显示一条粗线

女装类视觉设计分享

纯CSS下拉菜单代码

css3弹性盒模型