使用内边距和边框可以产生无穷无尽的效果。一种简单的选择是为列表的不同边设置不同的边框颜色，然后为鼠标经过的列表项设置相反的颜色。这样就可以设置成经典的凹凸按钮效果。
CSS 代码
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer li { margin: 0 0 .2em 0; }
#navcontainer a
{
display: block;
color: #036;
background-color: transparent;
width: 9em;
padding: .2em .8em;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #036;
border-bottom: 1px solid #036;
}
#navcontainer a:hover
{
background-color: #369;
color: #FFF;
border-top: 1px solid #036;
border-left: 1px solid #036;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
HTML 代码
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>
其他的Max Design 文章和演讲