CSS凹型导航栏按钮实际效果的完成编码

日期：2021-01-20 类型：科技新闻 

关键词：上线了小程序官网，年会抽奖小程序免费，做小程序，小程序网站，跑腿小程序

1般要求，圆角看起来更为舒适，可是下面直角略显生涩

因而设计方案师有了下面的要求，下面再加小凹型：

凹型？凹型？凹型？有点超级变态，这如何完成...........

照片毫无疑问是最开始考虑到到的，CSS完成有貌似有1定难度.......

别怕，咋们遇难而上，go go...

先上html构造，这个很简易,没甚么能够表明的：

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf⑻">    
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">    
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">    
  7.     <title>css凹型导航栏</title>    
  8.      
  9. </head>    
  10. <body>    
  11. <nav id="nav">    
  12.     <ul>    
  13.         <li>    
  14.             <div class="left"></div>    
  15.             <div class="con">导航栏1</div>    
  16.             <div class="right"></div>    
  17.         </li>    
  18.         <li>    
  19.             <div class="left"></div>    
  20.             <div class="con">导航栏2</div>    
  21.             <div class="right"></div>    
  22.         </li>    
  23.         <li>    
  24.             <div class="left"></div>    
  25.             <div class="con">导航栏3</div>    
  26.             <div class="right"></div>    
  27.         </li>    
  28.         <li>    
  29.             <div class="left"></div>    
  30.             <div class="con">导航栏4</div>    
  31.             <div class="right"></div>    
  32.         </li>    
  33.     </ul>    
  34. </nav>    
  35. </body>    
  36. </html>  

再看CSS

CSS Code拷贝內容到剪贴板
  1. #nav {    
  2.             background: #fff;    
  3.             border-bottom: 1px solid #7bd1ff;    
  4.             width: 960px;    
  5.             margin: 100px auto;    
  6.             height: 60px;;    
  7.         }    
  8.      
  9.         #nav ul li {    
  10.             float: left;    
  11.             list-style: none;    
  12.             height: 60px;    
  13.             margin: 0 10px;    
  14.         }    
  15.      
  16.         li * {    
  17.             float: left;    
  18.             transition: all .2s;    
  19.         }    
  20.      
  21.         .con {    
  22.             width: 60px;    
  23.             height: 60px;    
  24.             line-height: 60px;    
  25.             text-align: center;    
  26.             background: #7bd1ff;    
  27.             border-radius: 10px 10px 0 0;    
  28.         }    
  29. 　　　　　/*   
  30. 　　　　　　设定凹型的规格，   
  31. 　　　　　　根据margin精准定位   
  32. 　　　　　*/    
  33. .left, .rightright {    
  34.  width: 7px; height: 7px; margin: 53px 0 0 0;     
  35. }    
  36.  　　　　　/*   
  37. 　　　　　　下面的是重要，关键是用到了轴向渐变色 radial-gradient，   
  38. 　　　　　　根据占比区划完成立即全透明过多到情况色，沒有渐变色   
  39. 　　　　　　检测結果显示信息 transparent 50% 其实不能1半全透明1半有色调，70%+较为什么时候   
  40. 　　　　　*/    
  41. .left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #7bd1ff 30%); }    
  42.  .rightright { background: -webkit-radial-gradient(top rightright, circle, transparent 70%, #7bd1ff 30%); }    
  43.      
  44.      
  45.  li:hover .con { background: #2d85ff }    
  46.  li:hover .left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #2d85ff 30%); }    
  47.  li:hover .rightright { background: -webkit-radial-gradient(top rightright, circle, transparent 70%, #2d85ff 30%); }  

　so，这样，是否也沒有甚么难度，轻轻松松搞定。

以上这篇CSS凹型导航栏按钮实际效果的完成编码便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。

原文详细地址：CSS凹型导航栏按钮实际效果的完成编码

上一篇：手机微信互动交流手机游戏在哪儿里做 返回下一篇：没有了