再看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% 并不能一半透明一半有颜色，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%); }  

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