圆角按钮，圆润平滑、看起来让你看舒服，在网页设计中也必不可少，以前如果我要用圆角按钮是直接把图片切下来，如果有多种宽度的按钮，就切多个图片，然后一个一个的写css，显然，这种方法有缺点，通用性不好，而且多个css有很有重复代码，有点浪费资源。
后面终于找到一个通用的，可实现不固定宽度的圆角按钮方法，也是用图片作背景，不过要在按钮外面加一个标签，如div，然后把div和button，同时设置一张背景图片，不同的是背景图片位置不同，外面div标签为：background-position:left， 里面button为：background-position:right;
效果如下：
以下是代码，相信你一看就会明白的。
<!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=utf-8" /> <title>css不固定长度圆角按钮，兼容所有浏览器</title> <style type="text/css"> .submit{background:#fff url(statics/images/but.png) left top no-repeat;height: 27px;padding:0px 0px 0px 3px; margin:0px 0px 0px 0px; float:left;display:inline-block; overflow:hidden;} .submit input{background:#fff url(statics/images/but.png) right top no-repeat;height:27px; margin:0px; border:none;padding:0px 10px 0px 7px;font-size:14px; color:#fff;font-weight:bold; width:auto;overflow:visible;} </style> </head> <body> <div class="submit"><input type="submit" value="测试" id="Button2" class="btn" /></div> <br /><br /> <div class="submit"><input type="submit" value="再测试" id="Button3" class="btn" /></div><br /><br /> <div class="submit"><input type="submit" value="再再测试" id="Button4" class="btn" /></div><br /><br /> <div class="submit"><input type="submit" value="再再再测试" id="Button5" class="btn" /></div><br /><br /> <div class="submit"><input type="submit" value="再再再再测试" id="Button6" class="btn" /></div><br /><br /> <div class="submit"><input type="submit" value="再再再再再测试" id="Button7" class="btn" /></div><br /><br /> <div class="submit"><input type="submit" value="再再再再再再测试" id="Button8" class="btn" /></div><br /><br /> <div class="submit"><input type="submit" value="再再再再再再再测试" id="Button9" class="btn" /></div> </body> </html>
背景图片：
好了，圆角按钮实现了，其余神马a标签，span什么的都是一个原理。
541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
