http://www.xianlaiwan.cn/code/1881<!doctype?html>
<html>
????<head>
????????<meta?charset="UTF-8">
????????<title>CSS制作立體導航</title>
????????<link?rel="stylesheet"?>
????????<style>
????????????body{
??????????????background:?#ebebeb;
????????????}
????????????.nav{
??????????????width:560px;
??????????????height:?50px;
??????????????font:bold?0/50px?Arial;
??????????????text-align:center;
??????????????margin:40px?auto?0;
??????????????background:?#f65f57;
?????????????/*制作導航圓角*/
??????????????border-radius:?8px;
?????????????/*制作導航立體效果*/
??????????????box-shadow:?0?7px?0?#ba4a45;
????????????}
????????????.nav?a{
??????????????display:?inline-block;
????????????????-webkit-transition:?all?0.2s?ease-in;
????????????????-moz-transition:?all?0.2s?ease-in;
???????????????-o-transition:?all?0.2s?ease-in;
???????????????-ms-transition:?all?0.2s?ease-in;
???????????????transition:?all?0.2s?ease-in;
????????????}
????????????.nav?a:hover{
??????????????-webkit-transform:rotate(10deg);
??????????????-moz-transform:rotate(10deg);
??????????????-o-transform:rotate(10deg);
??????????????-ms-transform:rotate(10deg);
??????????????transform:rotate(10deg);
????????????}
????????????.nav?li{
??????????????position:relative;
??????????????display:inline-block;
??????????????padding:0?16px;
??????????????font-size:?13px;
??????????????text-shadow:1px?2px?4px?rgba(0,0,0,.5);
??????????????list-style:?none?outside?none;
????????????}
????????????/*制作導航分隔線效果*/
????????????.nav?li::before,
????????????.nav?li::after{
??????????????content:"";
??????????????position:absolute;
??????????????top:14px;
??????????????height:?25px;
??????????????width:?1px;
????????????}
????????????.nav?li::after{
??????????????right:?0;
??????????????background:?-moz-linear-gradient(top,?rgba(255,255,255,0),?rgba(255,255,255,.2)?50%,?rgba(255,255,255,0));
??????????????background:?-webkit-linear-gradient(top,?rgba(255,255,255,0),?rgba(255,255,255,.2)?50%,?rgba(255,255,255,0));
??????????????background:?-o-linear-gradient(top,?rgba(255,255,255,0),?rgba(255,255,255,.2)?50%,?rgba(255,255,255,0));
??????????????background:?-ms-linear-gradient(top,?rgba(255,255,255,0),?rgba(255,255,255,.2)?50%,?rgba(255,255,255,0));
??????????????background:?linear-gradient(top,?rgba(255,255,255,0),?rgba(255,255,255,.2)?50%,?rgba(255,255,255,0));
????????????}
????????????.nav?li::before{
??????????????left:?0;
??????????????background:?-moz-linear-gradient(top,?#ff625a,?#9e3e3a?50%,?#ff625a);
??????????????background:?-webkit-linear-gradient(top,?#ff625a,?#9e3e3a?50%,?#ff625a);
??????????????background:?-o-linear-gradient(top,?#ff625a,?#9e3e3a?50%,?#ff625a);
??????????????background:?-ms-linear-gradient(top,?#ff625a,?#9e3e3a?50%,?#ff625a);
??????????????background:?linear-gradient(top,?#ff625a,?#9e3e3a?50%,?#ff625a);
????????????}
????????????/*刪除導航第一個導航項左邊的分隔線*/
????????????.nav?a,
????????????.nav?a:hover{
??????????????color:#fff;
??????????????text-decoration:?none;
????????????}
????????</style>
????</head>
????<body>
????????<ul>
????????<li><a?href="">Home</a></li>
????????<li><a?href="">About?Me</a></li>
????????<li><a?href="">Portfolio</a></li>
????????<li><a?href="">Blog</a></li>
????????<li><a?href="">Resources</a></li>
????????<li><a?href="">Contact?Me</a></li>
????????</ul>
????</body>
</html>這是所給的源代碼代碼中可見，before與after兩個偽元素顏色不一樣，前面一個li的after與下一個li的before組合成為一條分割線。如果用li:hover偽類實現的話，只能顯示當前li的after和before偽元素如果我要實現兩邊都有分割線出現的效果，該怎樣？難點：之前做過分割線效果利用空元素的border來實現，但是無法實現漸變效果。如果通過建立偽元素進行background漸變的方式，無法實現兩條線同時顯示。
如何實現導航菜單分割線的動態顯示
FreeGloye
2015-03-02 21:32:06
