<html>
<HEAD><TITLE>Builder.com.cn-Web技术-无延迟翻滚的图形/CSS混合风格的按钮</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK href="/css/builder.css" type=text/css rel=STYLESHEET></HEAD>
<BODY><!--start head-->
<STYLE type=text/css>
<!--
div#menu {
height: auto;
width: 150px;
}
div#menu li{
height: 30px;
width: 100px;
margin: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: center;
line-height: 30px;
list-style-type: none;
background-image: url("http://photo.hexun.com/p/2006/0119/9129/b_58A7E2371A1D6ACA.jpg");
background-position: 0px 0px;
}
div#menu li a{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #FFFFFF;
}
div#menu li a:link {
color: #FFFFFF;
background-image: url("http://photo.hexun.com/p/2006/0119/9129/b_58A7E2371A1D6ACA.jpg");
background-position: 0px 0px;
}
div#menu li a:visited {
color: #CCCCCC;
background-image: url("http://photo.hexun.com/p/2006/0119/9129/b_58A7E2371A1D6ACA.jpg");
background-position: 0px 0px;
}
div#menu li a:hover {
font-weight: bold;
color: #FFFFFF;
background-image: url("http://photo.hexun.com/p/2006/0119/9129/b_58A7E2371A1D6ACA.jpg");
background-position: -123px 0px;
}
div#menu li a:active {
font-weight: bold;
color: #FFFFFF;
background-image: url("http://photo.hexun.com/p/2006/0119/9129/b_58A7E2371A1D6ACA.jpg");
background-position: 0px -60px;
}
-->
</STYLE>
<div id="menu">
<ul>
<li><a href="link1.html">Button 1</a></li>
<li><a href="link2.html ">Button 2</a></li>
<li><a href="link3.html ">Button 3</a></li>
</ul>
</div>
</BODY>
</html>
在以上代码中，请注意到div#menuli规则指定了按钮的高度和尺寸。指定line-height以匹配按钮的高度，以确保文本能垂直地放置在中央。background-position属性控制着背景图像的左上角的位置。
在div#menuli规则中，与width: 100%和 height: 100%联合在一起的display: block属性，能够使得按钮框内而不只是文本被点击。
最后，在独立按钮状态规则中，比如div#menulia:link，color和font-weight属性建立了文本翻滚效果，同样background-image和background-position也为背景图像实现了相同的功能。将悬浮状态设置为background-position: 0px -30px能够让背景图像增加到30象素，以致于顶端按钮外表被隐藏。同样，将激活状态设置为background-position: 0px -60px，可以将背景图像象素提高得更多。background-image需要在每一规则中不断地重复。
这一技术能够让你获得具有传统图形按钮的三维效果，并具有快速的CSS文本风格的混合按钮。同样，这一技术能够让你实现无延迟或者无图像预先载入的图形翻滚效果。