CSS3 圖片光影是在網頁設計中非常常用的一種效果，可以讓圖片更加生動有趣，增強網頁的美感。在本文中，我們將學習如何使用 CSS3 實現圖片光影效果。

.img-shadow{
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

以上代碼是一個簡單的 CSS3 圖片光影效果實現，我們使用 box-shadow 屬性來實現。box-shadow 屬性接受四個值，分別表示 X、Y 方向的偏移值、模糊程度和顏色。其中，rgba(0,0,0,0.3) 表示黑色透明度為 0.3 的顏色。

.img-hover{
position: relative;
display: inline-block;
}
.img-hover .mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
opacity: 0;
}
.img-hover:hover .mask{
opacity: 1;
}

以上代碼是一個基于 hover 實現的圖片光影效果。我們使用了 position、opacity 等屬性來實現制造遮罩效果。其中，opacity 表示遮罩的透明度值。

在實現圖片光影效果時，我們可以根據自己的需求來選擇合適的方法。值得注意的是，box-shadow 屬性在某些瀏覽器上可能會出現兼容性問題。