css怎么实现悬浮效果的阴影

2023-06-08 09:06:01 496人浏览安东尼

摘要

这篇文章主要介绍了CSS怎么实现悬浮效果的阴影，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。要实现的效果图：实现的代码：-WEBkit-box-shadow:0px

这篇文章主要介绍了CSS怎么实现悬浮效果的阴影，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

要实现的效果图：

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>        <div class="container">            <div class="search">                <div class="search_left"><img src="img/back.png" /></div>                <div class="search_input"><input type="text" placeholder="输入商铺名称，车位号，服务设施"></div>                <div class="search_right"><img src="img/scale_search.png" alt="放大" /></div>            </div>        </div>        <div class="words">常用服务设置...</div>        <div 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>        </div>                <div class="words">车牌找车</div>        <div class="servers">            <ul>                <li><img src="img/car.png" alt="车牌找车" /></li>                            </ul>        </div>    </body></html>

感谢你能够认真阅读完这篇文章，希望小编分享的“css怎么实现悬浮效果的阴影”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网精选频道，更多相关知识等着你来学习!

--结束END--

本文标题: css怎么实现悬浮效果的阴影

本文链接: https://lsjlt.com/news/253279.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341