使用滑动门技术实现圆角按钮，如图所示，背景图和效果图。
所谓滑动门，就是当按钮的状态改变时，移动背景图，显示不同的状态。此法简单有效，但缺点是不能纵向扩展。要处理纵向扩展，就要使用复杂的圆解技术，如4个圆角图片，四个边的图片加上中间的图片一共9张图来实现。
<html>
<head>
<style type='text/css'>
body {
font-size: 23px;
}
.button {
cursor: default;
font-size: 15px;
background: url(button.png) no-repeat top right;
display: inline-block; /* inline element has layout */
/* float: right;*/ /* Can also be not float. */
height: 24px; /* height of the background image */
padding-right: 15px;
white-space:nowrap; /* Don't wrap line */
line-height: 24px; /* Vertically centralize the text */
-moz-user-select:none; /* Don't select text */
-webkit-user-select:none;
}
.button .inner {
background: url(button.png) no-repeat top left;
display: inline-block;
height: 24px;
white-space:nowrap;
line-height: 24px;
padding-left: 15px;
}
span.button:hover {
text-shadow: 0px 0px 5px #999;
}
span.button:hover span {
}
span.button:active {
text-shadow: 0px 0px 5px #333;
background-position: right bottom;
}
span.button:active span.inner {
background-position: left bottom;
}
</style>
<script src="js/jquery.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<span class="button"><span class="inner">The text of the button is very long</span></span>
</body>
</html>
不使用a来做按钮，是因为前不久在php中遇到<a href="#">xxxx</a>，点击此链接，会刷新本页，最后只好使用了span来做按钮了，效果是一样的，只不过a的鼠标会自动是手势罢了，上面的文字不可选择。
为了防止选中文字：
-moz-user-select:none; /* Don't select text */
-webkit-user-select:none;
为了防止按钮中的文字换行：
white-space:nowrap; /* Don't wrap line */
HTML中的元素，要么是inline的(可与其他inline元素在同一行)，要么是block的(独占一行)，所以为了让按钮能与其他元素在同一行，还要具有block元素才有的layout功能，使用了
display: inline-block;
让按钮上的文字居中，最好的办法是使用 line-height，让其与按钮的背景图一样高:
line-height: 24px;
由于上面使用到的一些CSS属性都是可继承的，所以不用重复再写。