CSS中怎么實現凹型導航按鈕效果

發布時間：2021-08-07 17:23:54 來源：億速云閱讀：155 作者：Leah 欄目：web開發

這期內容當中小編將會給大家帶來有關CSS中怎么實現凹型導航按鈕效果，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

<!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凹型導航</title>
</head>
<body>
<nav id="nav">
<ul>
<li>
<div class="left"></div>
<div class="con">導航1</div>
<div class="right"></div>
</li>
<li>
<div class="left"></div>
<div class="con">導航2</div>
<div class="right"></div>
</li>
<li>
<div class="left"></div>
<div class="con">導航3</div>
<div class="right"></div>
</li>
<li>
<div class="left"></div>
<div class="con">導航4</div>
<div class="right"></div>
</li>
</ul>
</nav>
</body>
</html>

再看CSS

CSS Code復制內容到剪貼板

#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;
}
　　　　　/*
　　　　　　設置凹型的尺寸，
　　　　　　通過margin定位
　　　　　*/
.left, .rightright {
width: 7px; height: 7px; margin: 53px 0 0 0;
}
　　　　　/*
　　　　　　下面的是關鍵，主要是用到了徑向漸變 radial-gradient，
　　　　　　通過比例劃分實現直接透明過度到背景色，沒有漸變
　　　　　　測試結果顯示 transparent 50% 并不能一半透明一半有顏色，70%+比較何時
　　　　　*/
.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%); }

上述就是小編為大家分享的CSS中怎么實現凹型導航按鈕效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站