漸變與為元素

如何使用漸變與偽元素制作導航分割線

小程序緣

2017-01-25

源自：十天精通CSS3 5-5

關注問題我要回答

841

操作

收起

1 回答

祺妙Tony
2017-01-26

分別使用before和after在導航節點前后都加上偽元素，設置上不同顏色，這樣前一個節點的after和后一個節點before貼在一起組成的分割線會好看。
分割線兩邊透明，中間不透明，漸變；
去掉最前面節點的before和最后面節點的after，導航完成。

<!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:5px;
??????????/*制作導航立體風格*/
??????????box-shadow:0?5px?#b64b41;
}
.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;
???width:1px;
???height:25px;
}
.nav?li::before{
???left:0;
???background:-moz-linear-gradient(to?top,#f65f57,#9e3e3a?50%,#f65f57);
???background:-webkit-linear-gradient(to?top,#f65f57,#9e3e3a?50%,#f65f57);
???background:-o-linear-gradient(to?top,#f65f57,#9e3e3a?50%,#f65f57);
???background:-ms-linear-gradient(to?top,#f65f57,#9e3e3a?50%,#f65f57);
???background:linear-gradient(to?top,#f65f57,#9e3e3a?50%,#f65f57);
}
???.nav?li::after{
???????right:0;
???????background:-moz-linear-gradient(to?top,rgba(255,255,255,0),?rgba(255,255,255,.2)?50%,?rgba(255,255,255,0));
???????background:-webkit-linear-gradient(to?top,rgba(255,255,255,0),?rgba(255,255,255,.2)?50%,?rgba(255,255,255,0));
???????background:-o-linear-gradient(to?top,rgba(255,255,255,0),?rgba(255,255,255,.2)?50%,?rgba(255,255,255,0));
???????background:-ms-linear-gradient(to?top,rgba(255,255,255,0),?rgba(255,255,255,.2)?50%,?rgba(255,255,255,0));
???????background:linear-gradient(to?top,rgba(255,255,255,0),?rgba(255,255,255,.2)?50%,?rgba(255,255,255,0));
???}
????????/*刪除第一項和最后一項導航分隔線*/
.nav?li:first-child::before,
.nav?li:last-child::after?{
???background:none;
}

.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>