首頁 > 文章 > web前端 > css怎麼實現滑鼠移到div塊時自動加上陰影效果？

css怎麼實現滑鼠移到div塊時自動加上陰影效果？

藏色散人原創: 2018-08-10 16:04:0412700瀏覽

我們在瀏覽各大網站時，點擊其中的圖片可能會出現放大或旋轉等等的特效。這種效果的確能讓人眼睛一亮，也可能帶來使用者點擊的流量。當然強大的css功能不隻隻有這樣特效。這篇文章就為大家介紹一個更酷炫的特效即當滑鼠移入div塊時產生的css陰影效果，這樣就能立即產生立體感。

css陰影效果具體程式碼範例如下：

  <style>
        .shadow{
            float:left;
            margin-left:20px;
            background: #EEFF99;
            width:200px;
            height:400px;
        }
        .shadow:hover{
            -webkit-box-shadow: #ccc 0px 10px 10px;
            -moz-box-shadow: #ccc 0px 10px 10px;
            box-shadow: #ccc 0px 10px 10px;  }
    </style>
</head>
<body>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
</body>

#以上的程式碼測試效果css陰影邊框如下圖：

css怎麼實現滑鼠移到div塊時自動加上陰影效果？

##註：無論是給那個元素加陰影都離不開一個重要的屬性:hover 偽類。

:hover 偽類別就是在滑鼠移到元素上時向此元素新增特殊的樣式。只要你掌握了這個hover的使用方法，無論是給div塊還是圖片加陰影都可以輕鬆實現這樣的效果。

這個偽類別是應用處於「懸停狀態」的元素。懸停定義為使用者指示了一個元素但沒有將其啟動。對此最常見的例子是將滑鼠指標移到 HTML 文件中一個超連結的邊界範圍內。理論上，其他元素也可以處於懸停狀態，不過 CSS 沒有定義究竟是哪些元素。

【相關內容推薦】

在頁面中怎麼用css讓圖片有立體感的效果?（程式碼實測）

html5極速3D立體式圖片相簿切換效果

#

以上是css怎麼實現滑鼠移到div塊時自動加上陰影效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css html 指针伪类

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css怎麼做出好看的搜尋框樣式？（程式碼範例）下一篇：css怎麼做出好看的搜尋框樣式？（程式碼範例）

相關文章

看更多