css懸浮效果陰影實現代碼

最後更新：2018-03-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文主要和大家介紹了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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More