CSS3鼠標(biāo)懸停加陰影是一種常用的網(wǎng)頁設(shè)計技術(shù)，可以讓網(wǎng)頁上的元素更加美觀，同時也可以讓用戶在點擊鼠標(biāo)懸停時看到更加真實的交互效果。本文將介紹如何使用CSS3來實現(xiàn)鼠標(biāo)懸停加陰影的效果。

首先，我們需要在HTML文件中引入CSS3樣式表。可以通過標(biāo)簽中的屬性來添加以下內(nèi)容：

其中，style.css是CSS3樣式表的文件名。

接下來，我們需要編寫CSS3樣式表，來實現(xiàn)鼠標(biāo)懸停加陰影的效果。以下是一個簡單的示例：

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”的類來創(chuàng)建陰影效果。在類中，我們使用了一個before和after元素來創(chuàng)建陰影，然后在樣式表中設(shè)置了它們的位置、寬度、高度、背景顏色和陰影效果。

最后，我們需要在HTML文件中使用