css实现立体凹凸导航条导航栏效果代码-html代码-BFW代码库

css实现立体凹凸导航条导航栏效果代码

代码语言：html

代码描述：css实现立体凹凸导航条导航栏效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .cf:before,.cf:after {
	content:"";
	display:table;
}
.cf:after {
	clear:both;
}
body {
	background:#a9b6c8;
	color:#fff;
	font:14px/18px Arial,sans-serif;
	text-align:center;
}
p {
	bottom:10px;
	left:10px;
	position:absolute;
}
a {
	color:#fff;
}
/*--------------------------------------------------------------1.0 - TOOLBAR--------------------------------------------------------------*/.toolbar {
	left:50%;
	margin:-60px 0 0 -140px;
	position:absolute;
	top:50%;
	width:280px;
	border-radius:4px;
	box-shadow:0 0 3px rgba(64,100,138,.3),0 2px 4px #3b5c7f,0 12px 18px rgba(64,100,138,.4);
}
.toolbar li {
	float:left;
	list-style:none;
	width:25%;
}
.toolbar a {
	background:#f4f7f9;
	background:-moz-linear-gradient(top,#f4f7f9 0%,#f7fafd 4%,#ecf2f7 30%,#e4ebf3 68%,#dce4ee 89%,#d5e0eb 92%,#c7d3e0 96%,#c6d2df 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f4f7f9),color-stop(4%,#f7fafd),color-stop(30%,#ecf2f7),color-stop(68%,#e4ebf3),color-stop(89%,#dce4ee),color-stop(92%,#d5e0eb),color-stop(96%,#c7d3e0),color-stop(100%,#c6d2df));
	background:-webkit-linear-gradient(top,#f4f7f9 0%,#f7fafd 4%,#ecf2f7 30%,#e4ebf3 68%,#dce4ee 89%,#d5e0eb 92%,#c7d3e0 96%,#c6d2df 100%);
	background:-o-linear-gradient(top,#f4f7f9 0%,#f7fafd 4%,#ecf2f7 30%,#e4ebf3 68%,#dce4ee 89%,#d5e0eb 92%,#c7d3e0 96%,#c6d2df 100%);
	background:-ms-linear-gradient(top,#f4f7f9 0%,#f7fafd 4%,#ecf2f7 30%,#e4ebf3 68%,#dce4ee 89%,#d5e0eb 92%,#c7d3e0 96%,#c6d2df 100%);
	background:linear-gradient(to bottom,#f4f7f9 0%,#f7fafd 4%,#ecf2f7 30%,#e4ebf3 68%,#dce4ee 89%,#d5e0eb 92%,#c7d3e0 96%,#c6d2df 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f7f9',endColorstr='#c6d2df',GradientType=0 );
	border-left:1px solid rgba(79,123,170,.4);
	border-right:1px solid rgba(255,255,255,.3);
	color:#40648a;
	display:block;
	font-size:27px;
	height:54px;
	line-height:57px;
	text-decoration:none;
	text-shadow:0 1px 0 #fff;
}
.toolbar li:first-child a {
	border-left:none;
	border-radius:4px 0 0 4px
}
.toolbar li:last-child a {
	border-right:none;
	border-radius:0 4px 4px 0
}
.toolbar a:hover {
	background:#aac5e0;
	background:-moz-linear-gradient(top,#aac5e0 0%,#adc8e4 4%,#a2c0de 30%,#9ab9da 68%,#92b2d5 89%,#8baed2 92%,#7da1c7 96%,#7ca0c6 100%);
	background:-webkit-gradient(l.........完整代码请登录后点击上方下载按钮下载查看