慕课网学到的用css3制作立体导航，受益匪浅，配合前段时间学的二级导航，有空试，哈哈！
内容简单，但伪类after的使用需要注意！
经过修改的最终效果图：
涉及css3的知识点包括：
圆角特效：border-radius: 10px;
盒子阴影：box-shadow: 2px 5px 0px #0000cc;
文字阴影：text-shadow:1px 2px 4px rgba(0,0,0,.5);
动画过渡：transition: all 0.2s ease-in;
动画效果-旋转：transform:rotate(10deg);
颜色线性渐变背景：background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff);
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS制作立体导航</title> <style> body{ background: #ebebeb; } *{margin: 0;padding: 0;} .nav{ text-align: center; width: 615px; height: 50px; margin:40px auto 0; background: #3333ff; border-radius: 10px; box-shadow: 2px 5px 0px #0000cc; } .nav li{ height: 50px; line-height: 50px; width: 100px; float: left; list-style: none; position:relative; display:inline-block; font-size: 13px; text-shadow:1px 2px 4px rgba(0,0,0,.5); } .nav a{ display: inline-block; text-decoration: none; -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:after{ content: ""; position: absolute; height: 20px; top:15px; width: 1px; right: 0px; -webkit-background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff); -moz-background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff); -o-background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff); -ms-background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff); background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff); } .nav li:last-child:after{ background: none; } .nav a, .nav a:hover{ color:#fff; text-decoration: none; } </style></head><body> <ul class="nav"> <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>送上一张配色图：
Wie man mit langsamer Computerverzögerung und langsamer Reaktion umgeht
midownload
HTML-Code-Sammlung
Was sind die kostenlosen virtuellen PHP-Hosts im Ausland?
So stellen Sie vollständig gelöschte Dateien auf dem Computer wieder her
Wörter verschwinden nach dem Tippen
Welche Anwendungen bietet das Internet der Dinge?
So lösen Sie ein Tastendruckereignis aus
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
