css悬浮效果阴影实现代码

2020-11-27 来源：赴品旅游

本文主要和大家介绍了css实现悬浮效果的阴影的方法示例的相关资料，希望能帮助到大家。我们先来看一下效果图。

要实现的效果图：

实现的代码：

-webkit-box-shadow:0px 3px 3px #c8c8c8 ;
-moz-box-shadow:0px 3px 3px #c8c8c8 ;
box-shadow:0px 3px 3px #c8c8c8 ;

整个页面的代码：

<!DOCTYPE html >
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
 
 <style>
 .search {
 height: 46px;
 border: 1px solid #F0F1F1;
 border-radius: 25px;
 margin: 0 20px;
 
-webkit-box-shadow:0px 3px 3px #c8c8c8 ;
-moz-box-shadow:0px 3px 3px #c8c8c8 ;
box-shadow:0px 3px 3px #c8c8c8 ;
 }
 
 .search_left {
 float: left;
 margin: 5px 7px 5px 11px;
 width: 35px;
 height: 34px;
 border-radius: 50px;
 background: red;
 text-align: center;
 line-height: 42px;
 }
 
 .search_left img {
 width: 60%;
 height: 60%;
 }
 
 .search_input {
 float: left;
 }
 
 .search_input input {
 border: none;
 height: 30px;
 margin-top: 5px;
 }
 
 .search_right {
 float: right;
 width: 20px;
 height: 20px;
 margin: 9px 17px 5px 10px;
 }
 
 .search_right img {
 width: 100%;
 height: 100%;
 }
 
 .words {
 color: #D1D1D1;
 font-size: 12px;
 margin-top: 21px;
 margin-left: 30px;
 }
 
 .servers {
 overflow: auto;
 }
 
 .servers ul {
 overflow: auto;
 padding-left: 16px;
 }
 
 .servers ul li {
 list-style: none;
 background: #f6f6f9;
 float: left;
 width: 47px;
 height: 47px;
 text-align: center;
 margin: 5px 10px;
 }
 
 .servers ul li img {
 width: 60%;
 height: 60%;
 margin-top: 9px;
 }
 </style>
 <title>高校地图</title>
 </head>

 <body>
 <p class="container">
 <p class="search">
 <p class="search_left"><img src="img/back.png" /></p>
 <p class="search_input"><input type="text" placeholder="输入商铺名称，车位号，服务设施"></p>
 <p class="search_right"><img src="img/scale_search.png" alt="放大" /></p>
 </p>
 </p>

 <p class="words">常用服务设置...</p>

 <p class="servers">
 <ul>
 <li><img src="img/stairs.png" alt="手扶电梯" /></li>
 <li><img src="img/stairs2.png" alt="手扶电梯" /></li>
 <li><img src="img/sex.png" alt="手扶电梯" /></li>
 <li><img src="img/entris.png" alt="手扶电梯" /></li>
 <li><img src="img/exiy.png" alt="手扶电梯" /></li>
 <li><img src="img/moner.png" alt="手扶电梯" /></li>
 </ul>
 </p>
 
 <p class="words">车牌找车</p>
 <p class="servers">
 <ul>
 <li><img src="img/car.png" alt="车牌找车" /></li>
 
 </ul>
 </p>
 </body>

</html>

显示全文

全部栏目

css悬浮效果阴影实现代码