一个使用过程的范例
这里是一个代码范例，范例的无预先载入的翻滚技术应用于图形/CSS混合按钮。在这种情况下，按钮文本以无顺序列表而标记，三个外形美观的按钮包含在具有ID menu的div中。首先，CCS为：
div#menu {
height: auto;
width: 150px;
}
div#menuli {
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(images/buttons.jpg);
background-position: 0px 0px;
}
div#menuli a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #FFFFFF;
}
div#menulia:link {
color: #FFFFFF;
background-image: url(images/buttons.jpg);
background-position: 0px 0px;
}
div#menulia:visited {
color: #CCCCCC;
background-image: url(images/buttons.jpg);
background-position: 0px 0px;
}
div#menulia:hover {
font-weight: bold;
color: #FFFFFF;
background-image: url(images/buttons.jpg);
background-position: 0px -30px;
}
div#menulia:active {
font-weight: bold;
color: #FFFFFF;
background-image: url(images/buttons.jpg);
background-position: 0px -60px;
}
这里是这三个按钮的HTML：
＜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＞
在以上代码中，请注意到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文本风格的混合按钮。同样，这一技术能够让你实现无延迟或者无图像预先载入的图形翻滚效果。
