CSS圖標(biāo)已經(jīng)成為網(wǎng)頁設(shè)計(jì)中不可或缺的一部分，而圖標(biāo)上的光影效果更能夠?yàn)榫W(wǎng)頁添加豐富的層次感和動(dòng)感。

.icon {
width: 50px;
height: 50px;
background: url('icon.png');
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

在上述代碼中，box-shadow屬性添加了一個(gè)模糊度為10像素，顏色為黑色，透明度為0.3的陰影效果。這種效果讓圖標(biāo)看起來更加立體，給人一種凸起的感覺。

除了box-shadow屬性，我們還可以使用text-shadow屬性來為文字圖標(biāo)添加光影效果。

.text-icon {
font-family: 'FontAwesome';
font-size: 30px;
color: #333;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

在上述代碼中，text-shadow屬性添加了一個(gè)水平偏移量為1像素，垂直偏移量為1像素，模糊度為2像素，顏色為黑色，透明度為0.5的陰影效果。這種效果讓文本圖標(biāo)看起來更加立體，給人一種浮雕的感覺。

總的來說，CSS圖標(biāo)上的光影效果是為了讓圖標(biāo)更加真實(shí)、立體和生動(dòng)。通過合理的設(shè)置陰影效果，我們可以讓圖標(biāo)更具有層次感和動(dòng)感，讓網(wǎng)頁更加豐富多彩。