边框设置，不同效果

<style>

#lx{

       font-family:Verdana, Geneva, sans-serif;

       font-size:14px;

}

#lx a,#menu a:visited{

       text-decoration:none;     /*文字无下划线*/

       text-align:center;     /*文字居中*/

       color:#fff;       /*文字颜色*/

       display:block;  /*display,框的类型；block,此元素将显示为块级元素，此元素前后会带有换行符。*/

       width:10em;

       padding:0.25em;

       /*margin:0 auto;*/

      

       background-color:#8ab; /*设置背景颜色*/

       border:2px solid #fff;     /*设置边框粗细 线性 颜色*/

       border-color:#def #678 #345 #cde;       /*边框颜色，上右下左设置*/

}

#lx a:hover{

       border-color:#345 #cde #def #678;       /*边框颜色，同上反设置*/

}</style>

 

<div id="lx">

<a href="#">Home</a>

<a href="#">Contact Us</a>

<a href="#">Web Dav</a>

<a href="#">Web Design</a>

<a href="#">Map</a>

</div>

转载于:https://www.cnblogs.com/yo-yo/archive/2011/09/29/2195147.html