温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS中怎么实现凹型导航按钮效果

发布时间:2021-08-07 17:23:54 来源:亿速云 阅读:155 作者:Leah 栏目:web开发

这期内容当中小编将会给大家带来有关CSS中怎么实现凹型导航按钮效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

  1. <!DOCTYPE html>    

  2. <html>    

  3. <head>    

  4.     <meta charset="utf-8">    

  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-bottom1px solid #7bd1ff;    

  4.             width960px;    

  5.             margin100px auto;    

  6.             height60px;;    

  7.         }    

  8.      

  9.         #nav ul li {    

  10.             floatleft;    

  11.             list-stylenone;    

  12.             height60px;    

  13.             margin: 0 10px;    

  14.         }    

  15.      

  16.         li * {    

  17.             floatleft;    

  18.             transition: all .2s;    

  19.         }    

  20.      

  21.         .con {    

  22.             width60px;    

  23.             height60px;    

  24.             line-height60px;    

  25.             text-aligncenter;    

  26.             background#7bd1ff;    

  27.             border-radius: 10px 10px 0 0;    

  28.         }    

  29.      /*   

  30.       设置凹型的尺寸,   

  31.       通过margin定位   

  32.      */    

  33. .left, .rightright {    

  34.  width7pxheight7pxmargin53px 0 0 0;     

  35. }    

  36.       /*   

  37.       下面的是关键,主要是用到了径向渐变 radial-gradient,   

  38.       通过比例划分实现直接透明过度到背景色,没有渐变   

  39.       测试结果显示 transparent 50% 并不能一半透明一半有颜色,70%+比较何时   

  40.      */    

  41. .left { background: -webkit-radial-gradient(top leftcircletransparent 70%, #7bd1ff 30%); }    

  42.  .rightright { background: -webkit-radial-gradient(top rightrightcircletransparent 70%, #7bd1ff 30%); }    

  43.      

  44.      

  45.  li:hover .con { background#2d85ff }    

  46.  li:hover .left { background: -webkit-radial-gradient(top leftcircletransparent 70%, #2d85ff 30%); }    

  47.  li:hover .rightright { background: -webkit-radial-gradient(top rightrightcircletransparent 70%, #2d85ff 30%); }  

上述就是小编为大家分享的CSS中怎么实现凹型导航按钮效果了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI