一个导航条（按钮效果）

<! 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=gb2312"   />
< title > border-style的outset属性 </ title >
< style  type ="text/css" > ...
.bevelmenu{...}{  font: bold 13px arial;  padding: 6px 0;  margin: 0;  width: 100%;  background-color: #fff2bf;  text-align: left; /**//*将值设置为"right"菜单会向右靠拢*/  }
.bevelmenu li{...}{  list-style: none;  display: inline;  }
.bevelmenu li a{...}{  padding: 3px 0.5em;  text-decoration: none;  color: black;  background-color: #fff2bf;  border: 2px solid #fff2bf;  }
.bevelmenu li a:hover{...}{  color: black;  background-color: #ffe271;  border-style: outset;  }
html>body .bevelmenu li a:active{...}{ /**//* 鼠标按下的效果只有非ie浏览器才支持 */  border-style: inset;  }   </ style >
</ head >
 
< body >
< ul  class ="bevelmenu" >< li >< a  href ="http://www.sina.com" > 新浪 </ a >   </ li >< li >< a  href ="http://www.163.com" > 网易 </ a >   </ li >< li >< a  href ="http://www.baidu.com" > baidu </ a >   </ li >< li >< a  href ="http://www.yahoo.com" > yahoo </ a >   </ li >< li >< a  href ="http://www.google.com" > google </ a >   </ li ></ ul >
</ body >
</ html >