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

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

昭化ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

导航1

导航2

导航3

导航4

再看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%); }