CSS凹型導(dǎo)航按鈕效果的實(shí)現(xiàn)代碼

發(fā)布時(shí)間：2016-05-20 09:36:32 作者：佚名

下面小編就為大家?guī)硪黄狢SS凹型導(dǎo)航按鈕效果的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧。祝大家游戲愉快哦

一般需求，圓角看起來更加舒服，但是下面直角略顯生硬

于是設(shè)計(jì)師有了下面的需求，下面加上小凹型：

凹型？凹型？凹型？有點(diǎn)變態(tài)，這怎么實(shí)現(xiàn)...........

圖片肯定是最先考慮到的，CSS實(shí)現(xiàn)有貌似有一定難度.......

別怕，咋們遇難而上，go go...

先上html結(jié)構(gòu)，這個(gè)很簡單,沒什么可以說明的：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>css凹型導(dǎo)航</title>
</head>
<body>
<nav id="nav">
<ul>
<li>
<div class="left"></div>
<div class="con">導(dǎo)航1</div>
<div class="right"></div>
</li>
<li>
<div class="left"></div>
<div class="con">導(dǎo)航2</div>
<div class="right"></div>
</li>
<li>
<div class="left"></div>
<div class="con">導(dǎo)航3</div>
<div class="right"></div>
</li>
<li>
<div class="left"></div>
<div class="con">導(dǎo)航4</div>
<div class="right"></div>
</li>
</ul>
</nav>
</body>
</html>

再看CSS

CSS Code復(fù)制內(nèi)容到剪貼板

#nav {
background: #fff;
border-bottom: 1px solid #7bd1ff;
width: 960px;
margin: 100px auto;
height: 60px;;
}
#nav ul li {
float: left;
list-style: none;
height: 60px;
margin: 0 10px;
}
li * {
float: left;
transition: all .2s;
}
.con {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background: #7bd1ff;
border-radius: 10px 10px 0 0;
}
　　　　　/*
　　　　　　設(shè)置凹型的尺寸，
　　　　　　通過margin定位
　　　　　*/
.left, .rightright {
width: 7px; height: 7px; margin: 53px 0 0 0;
}
　　　　　/*
　　　　　　下面的是關(guān)鍵，主要是用到了徑向漸變 radial-gradient，
　　　　　　通過比例劃分實(shí)現(xiàn)直接透明過度到背景色，沒有漸變
　　　　　　測試結(jié)果顯示 transparent 50% 并不能一半透明一半有顏色，70%+比較何時(shí)
　　　　　*/
.left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #7bd1ff 30%); }
.rightright { background: -webkit-radial-gradient(top rightright, circle, transparent 70%, #7bd1ff 30%); }
li:hover .con { background: #2d85ff }
li:hover .left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #2d85ff 30%); }
li:hover .rightright { background: -webkit-radial-gradient(top rightright, circle, transparent 70%, #2d85ff 30%); }

　so，這樣，是不是也沒有什么難度，輕松搞定。

以上這篇CSS凹型導(dǎo)航按鈕效果的實(shí)現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片