一般需求，圆角看起来更加舒服，但是下面直角略显生硬
于是设计师有了下面的需求，下面加上小凹型：
凹型？凹型？凹型？有点变态，这怎么实现...........
图片肯定是最先考虑到的，CSS实现有貌似有一定难度.......
别怕，咋们遇难而上，go go...
先上html结构，这个很简单,没什么可以说明的：
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=no"> <title>css凹型导航</title> </head> <body> <navid="nav"> <ul> <li> <divclass="left"></div> <divclass="con">导航1</div> <divclass="right"></div> </li> <li> <divclass="left"></div> <divclass="con">导航2</div> <divclass="right"></div> </li> <li> <divclass="left"></div> <divclass="con">导航3</div> <divclass="right"></div> </li> <li> <divclass="left"></div> <divclass="con">导航4</div> <divclass="right"></div> </li> </ul> </nav> </body> </html>
再看CSS
CSS Code复制内容到剪贴板 #nav{ background:#fff; border-bottom:1pxsolid#7bd1ff; width:960px; margin:100pxauto; height:60px;; } #navulli{ float:left; list-style:none; height:60px; margin:010px; } li*{ float:left; transition:all.2s; } .con{ width:60px; height:60px; line-height:60px; text-align:center; background:#7bd1ff; border-radius:10px10px00; } /* 设置凹型的尺寸， 通过margin定位 */ .left,.rightright{ width:7px;height:7px;margin:53px000; } /* 下面的是关键，主要是用到了径向渐变radial-gradient， 通过比例划分实现直接透明过度到背景色，没有渐变 测试结果显示transparent50%并不能一半透明一半有颜色，70%+比较何时 */ .left{background:-webkit-radial-gradient(topleft,circle,transparent70%,#7bd1ff30%);} .rightright{background:-webkit-radial-gradient(toprightright,circle,transparent70%,#7bd1ff30%);} li:hover.con{background:#2d85ff} li:hover.left{background:-webkit-radial-gradient(topleft,circle,transparent70%,#2d85ff30%);} li:hover.rightright{background:-webkit-radial-gradient(toprightright,circle,transparent70%,#2d85ff30%);}
so，这样，是不是也没有什么难度，轻松搞定。
以上这篇CSS凹型导航按钮效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持查字典教程网。
原文地址：CSS凹型导航按钮效果的实现代码