CSS3實現投影效果

標籤：自動   rom   htm   tom   漸層   覆蓋   運行   hub   頁面   

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實現投影效果