横向扩展的图片Button按钮样式作者：Neoxone 发表时间： 2009年01月5号，星期一 阅读：3,928 次 后辈们记住了，在CSS3没有完全被支持的年代，我们设置全兼容的可扩展样式非常麻烦： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>横向扩展的button按钮样式</title> <style type="text/css"> .Button,.Button a,.Button input,.Button button{display:inline-block;height:24px;line-height:24px;padding:0;margin:0;border:0;vertical-align:middle;background:#fff url(http://www.cssass.com/blog/resource/img/article62/button.png) 100% 0 no-repeat;overflow:visible;} .Button{padding-left:5px;zoom:1;overflow:hidden;background-position:0 0;} .Button a,.Button input,.Button button{float:left;padding:0 8px 0 3px;cursor:pointer;} .ButtonG{background-position:0 -80px;} /* 绿色风格 */ .ButtonG a,.ButtonG input,.ButtonG button{background-position:100% -80px;color:#fff;} .ButtonO{background-position:0 -40px;} /* 橙色风格 */ .ButtonO a,.ButtonO input,.ButtonO button{background-position:100% -40px;color:#fff;} </style> </head> <body> <span class="Button"> <input type="button" value="浏 览" class="button" /> </span> <span class="Button ButtonG"> <a href='#'>告诉我们</a> </span> <span class="Button ButtonO"> <button>完成</button> </span> </body> </html> 相关文章:《input(button)的空隙》 标签： button, 按钮 这篇文章发布于 2009年01月5号，星期一，22:05，归类于 CSS2。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。