CSS3提供了許多新特性，其中之一是投影效果。投影效果可以讓我們的元素看起來更加立體，給人眼前一亮的感覺。讓我們看看如何使用CSS3上的投影效果。

.box {
width: 300px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 5px 5px 10px rgba(0,0,0,.5);
}

如上所示，我們設置了一個class名為box的元素，寬為300px，高為200px，背景色為白色，邊框為1像素灰色。然后我們通過box-shadow屬性添加了投影效果。box-shadow屬性需要四個值，分別表示偏移量、模糊度、擴散度和顏色。我們設置偏移量為5像素右偏移和5像素下偏移，模糊度為10像素（這個值決定了投影的邊緣模糊程度），擴散度為默認值1像素，顏色為黑色透明度為0.5的陰影。

除了前面的水平向和豎直向的偏移量外，還可以設置第三個參數，表示陰影的模糊程度。第四個參數表示陰影的顏色。我們還可以使用inset關鍵字來創建內部投影：

.box {
box-shadow: 5px 5px 10px rgba(0,0,0,.5) inset;
}

上述代碼中，我們在投影屬性的最后添加了inset關鍵字，表示投影是內部投影。這時陰影將出現在元素內部。我們還可以使用多值語法來添加多個陰影：

.box {
box-shadow: 5px 5px 10px rgba(0,0,0,.5),
-5px -5px 10px rgba(0,0,0,.5),
5px -5px 10px rgba(0,0,0,.5);
}

如上所示，我們添加了三個陰影效果，其中第一個陰影向右下角偏移，二個陰影向左上角偏移，第三個陰影向右上角偏移。

總之，CSS3的投影效果使我們的元素更加生動、立體，增強了網頁的視覺效果。