border高级应用（1）---立体按钮
一般情况下, 我们设置盒子的宽高度, 及上下左右边框,会呈现下图
如果我们把border的宽度加粗，并且设成不同的颜色
利用border的这种特性，我们可以制作如下立体菜单
源码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#menu{ width:9em; margin:0 auto; font-family:Arial, Helvetica, sans-serif; font-size:14px; border:#aaa solid 1px;}
#menu a, #menu a:visited{ display:block; color:#000; text-decoration:none; line-height:1.4em; border:#fff solid 0.5em;}
#menu a#first, #menu a#last{ margin:0px;}
#menu a:hover{ background:#aaa; color:#fff; border-color:#ddd #aaa;}
#menu2{ font-family:Arial, Helvetica, sans-serif; font-size:14px;}
#menu2 a, #menu2 a:visited{ text-decoration:none; text-align:center; color:#fff; display:block; width:10em; margin:0.5em auto; background:#8ab; border:#fff solid 2px; border-color:#def #678 #345 #cde; position:relative;}
#menu2 a:hover{ top:2px; left:2px; border-color:#345 #cde #def #678;}
</style>
</head>
<body>
<div id="menu">
<a id="first" href="#">Home</a>
<a href="#">Contact</a>
<a href="#">Web Dev</a>
<a id="last" href="#">Map</a>
</div>
<div id="menu2">
<a id="first" href="#">Home</a>
<a href="#">Contact</a>
<a href="#">Web Dev</a>
<a id="last" href="#">Map</a>
</div>
</body>
</html>
