CSS3中的投影效果是一種常見(jiàn)的應(yīng)用，可以讓網(wǎng)頁(yè)看起來(lái)更加立體，有層次感。投影效果可以通過(guò)CSS3中的box-shadow屬性來(lái)實(shí)現(xiàn)。

/*語(yǔ)法*/
box-shadow:  h-shadow v-shadow blur spread color inset;
/*屬性值解釋*/
h-shadow: 水平陰影的位置，可以是負(fù)值，表示陰影在元素左側(cè)
v-shadow: 垂直陰影的位置，可以是負(fù)值，表示陰影在元素上方
blur: 模糊距離，值越大越模糊
spread: 陰影的尺寸，正值表示陰影擴(kuò)大，負(fù)值表示縮小
color: 陰影的顏色，默認(rèn)是黑色
inset: 是否將陰影放在元素內(nèi)部，默認(rèn)是外部陰影

下面是一個(gè)實(shí)例，展示了一個(gè)帶有投影效果的div塊：

<div style="width: 200px; height: 150px; background-color: #eee;
box-shadow: 5px 5px 5px #888888;">
<p>這是帶有投影效果的div塊</p>
</div>

實(shí)例中，div塊的陰影位置為(5px,5px)，模糊距離為5px，顏色為#888888。

除此之外，我們還可以通過(guò)多重投影的方式，實(shí)現(xiàn)更加豐富的效果。通過(guò)在box-shadow屬性中添加多個(gè)投影效果即可。

/*語(yǔ)法*/
box-shadow:  h-shadow v-shadow blur spread color inset,
h-shadow v-shadow blur spread color inset;
/*屬性值解釋*/
與單一投影一致

下面是一個(gè)帶有兩個(gè)投影效果的實(shí)例：

<div style="width: 200px; height: 150px; background-color: #eee;
box-shadow: 5px 5px 5px #888888, -5px -5px 5px #888888;">
<p>這是帶有兩個(gè)投影效果的div塊</p>
</div>

實(shí)例中，div塊同時(shí)有水平陰影與垂直陰影，效果更加立體。

綜上所述，CSS3中的投影效果可以通過(guò)box-shadow屬性來(lái)實(shí)現(xiàn)，可以實(shí)現(xiàn)單一或多重的陰影效果，讓網(wǎng)頁(yè)呈現(xiàn)出更立體的效果。