一般需求，圆角看起来更加舒服，但是下面直角略显生硬
于是设计师有了下面的需求，下面加上小凹型：
凹型？凹型？凹型？有点变态，这怎么实现...........
图片肯定是最先考虑到的，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;} .left,.rightright{width:7px;height:7px;margin:53px000;} .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凹型导航按钮效果的实现代码
最新文章
热门文章
猜你喜欢
