今天小编跟大家讲解下有关用css创建一个类似按扭的导航 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关用css创建一个类似按扭的导航 的相关资料，希望小伙伴们看了有所帮助。
大多数的网站的导航,点击时会像按扭的效果.这种效果往往是利用图像替换技术.或者是用一些javascript代码来实现. 那么我们来想一下是否可以用纯css来做这样的效果. 答案是肯定的,你会发现使用CSS来做这样的效果会显得更加简单.在这个教程中使用的是CSS边框属性. 复制代码代码如下: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"lang="en-US"> <head> <title>Lists as navigation</title> <meta http-equiv="content-type"content="text/html; charset=utf-8"/> <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//css/listnav_button.css"/> </head> <body> <div id="navigation"> <ul> <li><a href="">Recipes</a></li> <li><a href="">Contact Us</a></li> <li><a href="">Articles</a></li> <li><a href="">Buy Online</a></li> </ul> </div> </body> </html> listnav_button.css 复制代码代码如下: #navigation { font-size:90% } #navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 1em; } #navigation li { display: inline; } #navigation a:link, #navigation a:visited { margin-right: 0.2em; padding: 0.2em 0.6em 0.2em 0.6em; color: #A62020; background-color: #FCE6EA; text-decoration: none; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } #navigation a:hover { border-top: 1px solid #717171; border-left: 1px solid #717171; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } 分析: 在做这个效果之前,先把导航水平排列,我们来想想如何做出扭按的效果.先给上边框和左边框一个颜色,再给下边框和右边框另一个颜.我们给上边框和左边框的颜色要比右边框和下边框的颜色要浅,这样就可以创建出一个轻微的斜角效果. 复制代码代码如下: #navigation a:link, #navigation a:visited { margin-right: 0.2em; padding: 0.2em 0.6em 0.2em 0.6em; color: #A62020; background-color: #FCE6EA; text-decoration: none; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } 这步就是实现按扭按下的效果.设置hover状态的边框颜色. 复制代码代码如下: #navigation a:hover { border-top: 1px solid #717171; border-left: 1px solid #717171; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } 最终效果:来源：爱蒂网
