css给你灵感-border立体菜单

　　希望以下小小的效果，能给做网站设计的你提供些许灵感。

　　鼠标移到菜单上的时候，菜单变成了立体的，这种效果我就觉得也许已经过时，不过经过设计师们的创意，我相信也许你能把它变成更实用更漂亮。这种效果做起来真是超级简单。先看看效果吧。

• 网站标准高级cssxhtml

　　为了使菜单产生立体效果，实际上只要把菜单的上边框线和左边框设置为亮色，右边框线和下边框线设置为暗色，就能产生立体效果了。实际上的配色要你设计了。精通css的你，一看就知道是怎么做的了，确实很简单，看看代码吧：

<style type="text/css" media="screen">
* {
    border:0;
    margin:0;
    padding:0;
}

#menu_tab{
    height:32px;
    line-height:32px;
    background:#ff9900;
    font-size:14px;
    padding-left:8px;
}

#menu_tab a{
    display:block;
    float:left;
    padding:0 12px;
    line-height:24px;
    color:#000;
    margin-top:2px;
    border:1px solid;
    border-color:#FFBC79 #D56A00 #D56A00 #FFBC79;
    }

#menu_tab a:hover{
    border:1px solid;
    border-color:#fff #000 #000 #fff;
    background-color:#ffaa00;
    color:#fff;
}
</style>

<li id="menu_tab">

        <a href="#">网站标准</a>
        <a href="#">高级css</a>
        <a href="#">xhtml</a>

</li>