简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

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

藏色散人
發布： 2018-08-10 16:04:04
原創
12747 人瀏覽過

我們在瀏覽各大網站時，點擊其中的圖片可能會出現放大或旋轉等等的特效。這種效果的確能讓人眼睛一亮，也可能帶來使用者點擊的流量。當然強大的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中文網其他相關文章！

相關標籤：
css阴影效果
來源：php.cn
上一篇：css怎麼做出好看的搜尋框樣式？ （程式碼範例） 下一篇：字體加陰影效果怎麼用css屬性實現？ （程式碼演示）
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
CSS 樣式未套用於網站 我正在使用Bootstrap5製作網站，但index.css屬性未應用於index.html。當我將滑鼠懸停在服務卡上時，背景應該會發生變化，從而產生過渡效果。應該是從這個到這個。...
來自於 2024-04-06 17:12:23
0
1
336
建立一個懸停效果，將選單按鈕轉換為具有陰影複製版本的 x 形狀 首先我想承認我的標題很令人困惑，對此感到抱歉。我想要實現的是懸停時的以下效果：我的網站在這裡https://wordpress-493302-3130963.cloudwaysap...
來自於 2024-04-04 11:55:21
0
2
315
按鈕啟動導致懸停效果故障 我一直在努力學習網頁開發的基礎知識（HTML、CSS和JS），所以我一直在嘗試製作一個可用的蘋果計算器。一切都工作正常，直到我注意到一個小錯誤。一開始，操作按鈕上的懸停效果很好，當...
來自於 2024-04-01 21:51:26
0
1
396
選擇事件改變時，CSS動畫觸發對應效果 我正在嘗試製作一個React應用程序，現在我有一個選擇輸入框，裡面有一些寶可夢，我需要做的是每當選擇改變（即寶可夢改變）時，寶可夢精靈會進行一個小的搖晃動畫。目前我只有一個改變的精...
來自於 2024-04-01 09:16:28
0
1
350
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！