CSS3鼠標懸停加陰影是一種常用的網頁設計技術，可以讓網頁上的元素更加美觀，同時也可以讓用戶在點擊鼠標懸停時看到更加真實的交互效果。本文將介紹如何使用CSS3來實現鼠標懸停加陰影的效果。
首先，我們需要在HTML文件中引入CSS3樣式表?？梢酝ㄟ^<head>標簽中的<link>屬性來添加以下內容：
<link rel="stylesheet" type="text/css" href="style.css">
其中，style.css是CSS3樣式表的文件名。
接下來，我們需要編寫CSS3樣式表，來實現鼠標懸停加陰影的效果。以下是一個簡單的示例：
margin: 0;
padding: 0;
box-sizing: border-box;
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
.drop-shadow {
position: relative;
width: 20px;
height: 20px;
margin-top: -5px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
.drop-shadow:before,
.drop-shadow:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
.drop-shadow:after {
left: 10px;
.drop-shadow:hover:before,
.drop-shadow:hover:after {
box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.2);
在這個示例中，我們使用了一個名為“drop-shadow”的類來創建陰影效果。在類中，我們使用了一個before和after元素來創建陰影，然后在樣式表中設置了它們的位置、寬度、高度、背景顏色和陰影效果。
最后，我們需要在HTML文件中使用<div>標簽來包含陰影效果。例如：
<div class="drop-shadow"></div>
這樣，當我們鼠標懸停在div元素上時，就會看到陰影效果。
通過以上步驟，我們就完成了CSS3鼠標懸停加陰影的編寫。使用這種方法，可以讓網頁更加美觀，同時也可以讓用戶在點擊鼠標懸停時看到更加真實的交互效果。