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陰影邊框如：
註：無論是給那個元素加陰影都離不開一個重要的屬性 :hover 偽類。
:hover 偽類就是在滑鼠移到元素上時向此元素添加特殊的樣式。只要你掌握了這個hover的使用方法，無論是給div塊還是圖片加陰影都可以輕鬆實現這樣的效果。
這個偽類是應用處於“懸停狀態”的元素。懸停定義為使用者指示了一個元素但沒有將其啟用。對此最常見的例子是將滑鼠指標移到 HTML 文檔中一個超連結的邊界範圍內。理論上，其他元素也可以處於懸停狀態，不過 CSS 沒有定義究竟是哪些元素。
【相關內容推薦】
在頁面中怎麼用css讓圖片有立體感的效果?（代碼實測）
html5極速3D立體式圖片相簿轉場效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
