时间：2024-01-13 23:00:01 | 来源：网站运营
时间：2024-01-13 23:00:01 来源：网站运营
如何用纯css制作分步导航条？：不知道题主是不是想问类似的多边形导航条能不能用纯css做出来，
在线咨询
<!DOCTYPE html><html> <head> <style type="text/css"> body{ background: #555; } nav { display: inline-block; letter-spacing: -4px; background: #333; border-radius: 4px; overflow: hidden; box-shadow: 0px 0px 8px rgba(0,0,0,0.2); } nav a{ display: inline-block; letter-spacing: 0px; padding: 8px 0; width: 123px; background: #eee; margin-left: -5px; margin-right: -5px; text-align: center; box-shadow: inset 0 1px 0px rgba(255,255,255,0.9), inset 0 2px 0px rgba(0,0,0,0.01); color: #333; text-decoration: none; -webkit-clip-path: polygon(10px 50%, 0 0, 112px 0, 99% 50%, 112px 99%, 0 99%); background-image: -webkit-gradient(linear,center 0%,center 100%,from(rgba(255,255,255,0.6)), to(#ccc)); -webkit-transition: background-color 0.4s ease 0s; text-shadow : 0 1px 0px rgba(255,255,255,0.8); font-size: 0.9em; } nav a:first-child { margin-left: 0px; -webkit-clip-path: polygon(0 0, 112px 0, 99% 50%, 112px 99%, 0 99%); } nav a:last-child { margin-right: 0px; -webkit-clip-path: polygon(10px 50%, 0 0, 100% 0, 100% 99%, 0 99%); } nav a:hover { background: #ccc; box-shadow: inset 0 0px 6px rgba(0,0,0,0.2); } nav a:active { background: #ccc; box-shadow: inset 0 0px 8px rgba(0,0,0,0.5); } </style> </head> <body> <nav> <a href="#">Home</a> <a href="#">Level 1</a> <a href="#">Level 2</a> <a href="#">Level 3</a> </nav> </body></html>以上代码完全没考虑游览器兼容，只写了webkit的私有前缀，所以请放在chrome下运行，关键词：导航
