CSS box-shadow 属性：创建阴影效果
<style>
/* 内阴影 */
.form-style-9 ul li .field-style {
-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
}
.form-style-9 ul li .field-style:focus {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
border: 1px solid #5292FE;
}
.form-style-9 ul li .field-split {
width: 100%!important;
}
.form-style-9 ul li .field-full {
width: 100%!important;
}
.form-style-9 ul li input.align-left {
float: left;
}
.form-style-9 ul li input.align-right {
float: right;
}
.form-style-9 ul li textarea {
width: 100%;
height: 100px;
}
.form-style-9 ul li input[type="button"],
.form-style-9 ul li input[type="submit"] {
-moz-box-shadow: inset 0px 1px 0px 0px #45D6D6;
-webkit-box-shadow: inset 0px 1px 0px 0px #45D6D6;
box-shadow: inset 0px 1px 0px 0px #45D6D6;
background-color: #2CBBBB;
border: 1px solid #27A0A0;
display: inline-block;
cursor: pointer;
color: #FFFFFF;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 14px;
padding: 8px 18px;
text-decoration: none;
text-transform: uppercase;
}
.form-style-9 ul li input[type="button"]:hover,
.form-style-9 ul li input[type="submit"]:hover {
background: linear-gradient(to bottom, #34CACA 5%, #30C9C9 100%);
background-color: #34CACA;
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="teacher.php"><span>ABC</span>School</a>
<ul class="user-menu">
<li class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><svg class="glyph stroked male-user"><use xlink:href="#stroked-male-user"></use></svg> User <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="logout.php"><svg class="glyph stroked cancel"><use xlink:href="#stroked-cancel"></use></svg> Logout</a></li>
</ul>
</li>
</ul>
</div>
<pre><code> </div><!-- /.container-fluid -->
</nav>
<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
<form role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<ul class="nav menu">
<li class="active"><a href="teacher.php"><svg class="glyph stroked dashboard-dial"><use xlink:href="#stroked-dashboard-dial"></use></svg> Dashboard</a></li>
<li class="parent ">
<a href="#">
<span data-toggle="collapse" href="#sub-item-1"><svg class="glyph stroked chevron-down"><use xlink:href="#stroked-chevron-down"></use></svg></span> Students
</a>
<ul class="children collapse" id="sub-item-1">
<li>
<a class="" href="student.php">
<svg class="glyph stroked chevron-right"><use xlink:href="#stroked-chevron-right"></use></svg> View All
</a>
</li>
<li>
<a class="" href="addstudent.php">
<svg class="glyph stroked chevron-right"><use xlink:href="#stroked-chevron-right"></use></svg> Add
</a>
</li>
</ul>
</li>
<li class="parent ">
<a href="#">
<span data-toggle="collapse" href="#sub-item-2"><svg class="glyph stroked chevron-down"><use xlink:href="#stroked-chevron-down"></use></svg></span> Teachers
</a>
<ul class="children collapse" id="sub-item-2">
<li>
<a class="" href="teacher.php">
<svg class="glyph stroked chevron-right"><use xlink:href="#stroked-chevron-right"></use></svg> View All
</a>
</li>
<li>
<a class="" href="addteacher.php">
<svg class="glyph stroked chevron-right"><use xlink:href="#stroked-chevron-right"></use></svg> Add
</a>
</li>
</ul>
</li>
<li><a href="payment.php"><svg class="glyph stroked line-graph"><use xlink:href="#stroked-line-graph"></use></svg> Payments</a></li>
</ul>
</div><!--/.
</code></pre>
原文地址: http://www.cveoy.top/t/topic/lhCH 著作权归作者所有。请勿转载和采集!