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图标上的光影效果是为了让图标更加真实、立体和生动。通过合理的设置阴影效果，我们可以让图标更具有层次感和动感，让网页更加丰富多彩。