Webkit引擎定義了-webkit-box-reflect屬性，該屬性能夠實現投影效果，具體語法如下：

-webkit-box-reflect: <direction> <offset> <mask-box-image>

屬性取值說明如下：

<direction>：定義反射方向，取指包括above、below、left和right。

<offset>：定義反射偏移的距離，取指包括數值或者百分比，其中百分比是根據對象的尺寸進行確定，如果省略該參數值，則默認為0。

<mask-box-image>：定義遮罩圖像，該圖像將覆蓋投影區域。如果省略該參數值，則默認為無遮罩圖像。也可以設置漸變色或者純色覆蓋。

當對象源發生變化時，投影能夠自動更新，當鼠標經過對象上時，也能夠在投影中看到鼠標效果，如果屬性應用到<video>標簽上，還可以看到視頻以投影效果進行播放。不僅限於圖片，在網頁中的任何對象都可以應用CSS Reflections，例如文字和視頻。

投影的規模和反射偏移不影響頁面的布局。

下面是一個例子：

.reflect1 {
      -webkit-box-reflect:below;
}
.reflect2{
      -webkit-box-reflect:below 10px;
}
.reflect3{
     -webkit-box-reflect:below 5px 
                        -webkit-gradient(linear,left top,left bottom, 
                         from(transparent),
                         color-stop(0.5,transparent),to(white))
 
;
}

查看運行效果

CSS3實現投影效果