時(shí)間：2024-01-13 23:00:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2024-01-13 23:00:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
如何用純css制作分步導(dǎo)航條？：不知道題主是不是想問(wèn)類(lèi)似的多邊形導(dǎo)航條能不能用純css做出來(lái)，
在線(xiàn)咨詢(xún)
<!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>以上代碼完全沒(méi)考慮游覽器兼容，只寫(xiě)了webkit的私有前綴，所以請(qǐng)放在chrome下運(yùn)行，關(guān)鍵詞：導(dǎo)航
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
