CSS凹型导航按钮效果的实现代码

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

CSS凹型导航按钮效果的实现代码_第1张图片

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

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

图片肯定是最先考虑到的,CSS实现有貌似有一定难度.......

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

先上html结构,这个很简单,没什么可以说明的:

XML/HTML Code 复制内容到剪贴板
  1. >    
  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">导航1div>    
  16.             <div class="right">div>    
  17.         li>    
  18.         <li>    
  19.             <div class="left">div>    
  20.             <div class="con">导航2div>    
  21.             <div class="right">div>    
  22.         li>    
  23.         <li>    
  24.             <div class="left">div>    
  25.             <div class="con">导航3div>    
  26.             <div class="right">div>    
  27.         li>    
  28.         <li>    
  29.             <div class="left">div>    
  30.             <div class="con">导航4div>    
  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%); }  

 so,这样,是不是也没有什么难度,轻松搞定。

以上这篇CSS凹型导航按钮效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

原文地址:CSS凹型导航按钮效果的实现代码

你可能感兴趣的:(CSS凹型导航按钮效果的实现代码)