<html>
<head>
<title>CSS代码使用一张图片实现自适应宽度圆角按钮</title>
<style type="text/css">
body {margin:0;padding:40px 80px;
background:#fff;
font:70% Arial, Helvetica, sans-serif;
color:#555;line-height:180%;}
h1, h2{font-size:180%;
font-weight:normal;color:#555;}
h2{font-size:140%;}
p{margin:1em 0;}
a{color:#f20;text-decoration:none;}
a:hover{color:#999;}
button{border:none;background:none;padding:0;
margin:0;width:auto;overflow:visible;text-align:center;
white-space:nowrap;height:40px;line-height:38px;}
button span, button em{display:block;height:40px;
line-height:38px;margin:0;color:#954b05;}
button span{padding-left:20px;
background:url(bg_button.gif) no-repeat 0 0;}
button em{font-style:normal;padding-right:20px;
background:url(bg_button.gif) no-repeat 100% 0;}
</style>
</head>
<body>
<p>
<button><span><em>My button</em></span></button>
</p>
<p>
<button><span><em>Another button</em></span></button>
</p>
<p>
<button><span><em>www.865171.cn 提供各种CSS代码示例</em>
</span></button>
</p>
</body>
</html>
