使用滑動(dòng)門技術(shù)實(shí)現(xiàn)圓角按鈕，如圖所示，背景圖和效果圖。
所謂滑動(dòng)門，就是當(dāng)按鈕的狀態(tài)改變時(shí)，移動(dòng)背景圖，顯示不同的狀態(tài)。此法簡(jiǎn)單有效，但缺點(diǎn)是不能縱向擴(kuò)展。要處理縱向擴(kuò)展，就要使用復(fù)雜的圓解技術(shù)，如4個(gè)圓角圖片，四個(gè)邊的圖片加上中間的圖片一共9張圖來(lái)實(shí)現(xiàn)。
<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來(lái)做按鈕，是因?yàn)榍安痪迷趐hp中遇到<a href="#">xxxx</a>，點(diǎn)擊此鏈接，會(huì)刷新本頁(yè)，最后只好使用了span來(lái)做按鈕了，效果是一樣的，只不過(guò)a的鼠標(biāo)會(huì)自動(dòng)是手勢(shì)罷了，上面的文字不可選擇。
為了防止選中文字：
-moz-user-select:none; /* Don't select text */
-webkit-user-select:none;
為了防止按鈕中的文字換行：
white-space:nowrap; /* Don't wrap line */
HTML中的元素，要么是inline的(可與其他inline元素在同一行)，要么是block的(獨(dú)占一行)，所以為了讓按鈕能與其他元素在同一行，還要具有block元素才有的layout功能，使用了
display: inline-block;
讓按鈕上的文字居中，最好的辦法是使用 line-height，讓其與按鈕的背景圖一樣高:
line-height: 24px;
由于上面使用到的一些CSS屬性都是可繼承的，所以不用重復(fù)再寫。