CSS圖標已經成為網頁設計中不可或缺的一部分，而圖標上的光影效果更能夠為網頁添加豐富的層次感和動感。

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

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

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

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

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

總的來說，CSS圖標上的光影效果是為了讓圖標更加真實、立體和生動。通過合理的設置陰影效果，我們可以讓圖標更具有層次感和動感，讓網頁更加豐富多彩。