我們在瀏覽各大網站時,點擊其中的圖片可能會出現放大或旋轉等等的特效。這種效果的確能讓人眼睛一亮,也可能帶來使用者點擊的流量。當然強大的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塊時自動加上陰影效果?的詳細內容。更多資訊請關注PHP中文網其他相關文章!