CSS凹型导航按钮效果的实现代码_ Div+Css教程-查字典教程网
CSS凹型导航按钮效果的实现代码
CSS凹型导航按钮效果的实现代码
发布时间:2016-12-27 来源:查字典编辑
摘要:一般需求,圆角看起来更加舒服,但是下面直角略显生硬于是设计师有了下面的需求,下面加上小凹型:凹型?凹型?凹型?有点变态,这怎么实现........

一般需求,圆角看起来更加舒服,但是下面直角略显生硬

于是设计师有了下面的需求,下面加上小凹型:

凹型?凹型?凹型?有点变态,这怎么实现...........

图片肯定是最先考虑到的,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凹型导航按钮效果的实现代码

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类