这篇文章主要介绍如何使用CSS制作立体导航栏，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>CSS制作立体导航</title> <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css"> <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; /* a元素的过渡属性：1、设置所有a标签过渡；2、过渡时间；3、速度曲线：以慢速开始的过渡效果 */ -webkit-transition: all 0.2s ease-in;/* Safari 和 Chrome */ -moz-transition: all 0.2s ease-in;/* Firefox */ -o-transition: all 0.2s ease-in;/* Opera */ -ms-transition: all 0.2s ease-in;/* IE 9 */ transition: all 0.2s ease-in; } .nav a:hover{ /* 鼠标移上时的效果；定义2D旋转10度 */ -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: 14px; 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 li:first-child::before{ background: none; } /*删除导航最后一个导航右边的分隔线*/ .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="">首页</a></li> <li><a href="">个人简介</a></li> <li><a href="">作品集</a></li> <li><a href="">博客</a></li> <li><a href="">资源</a></li> <li><a href="">联系我</a></li> </ul> </body></html>效果图：
1
2
总结：
1、body部分用无序列表
2、（1）hover
鼠标移上时的效果。
（2）疑问::before和:before的区别
简单来说单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存 在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
那么现在就可以完整的回答标题中的问题了，对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。
所以，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。
以上是“如何使用CSS制作立体导航栏”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
