在Web製做中,有些時候須要實現一些倒影的效果。在傳統網頁中,咱們只能使用photoshop事先將倒影設計好,而後導入到網頁中,這樣不但耗費資源,也阻礙了開發效率。而CSS新增了Reflections板塊,CSS Reflections容許設計倒影,目前,CSS Reflections僅得到webkit引擎的支持,咱們只可以在Chrome和Safari瀏覽器中測試。CSS3的box-reflect屬性,使咱們能夠對圖片、文字等進行倒影設計,具體語法:css
box-reflect: none | <direction> <offset> ? <mask-image> ?web
因爲此屬性並非W3C標準屬性,在具體使用之時,仍是須要添加瀏覽器的私有屬性,根據瀏覽器的兼容性,使用box-reflect是須要添加-webkit的前綴。瀏覽器
1.direction佈局
direction定義方向,取值包括above、below、left、right。具體含義如表1:測試
表1 box-reflect屬性的direction參數值取值說明spa
2.offset設計
offset定義反射偏移的距離,取值包括數值或百分比,其中百分比根據對象的尺寸進行肯定,默認爲0。用長度值來定義倒影與對象之間的間隔,能夠爲負值。用百分比來定義倒影與對象之間的間隔,能夠爲負值。3d
3.mask-box-image視頻
mask-box-image定義遮罩圖像,該圖像將覆蓋投影區域。遮罩圖像能夠是背景圖片,也能夠是漸變生成的背景圖像。若是省略該值,則默認無遮罩圖像。該參數有以下取值能夠選擇:對象
(1)none:無遮罩
(2)使用絕對或相對地址指定遮罩圖像
(3)使用線性漸變建立遮罩圖像
(4)使用徑向(放射性)漸變建立遮罩圖像
(5)使用重複的線性漸變建立遮罩圖像
(6)使用重複的徑向(放射性)漸變建立遮罩圖像
說明
設置或檢索對象倒影
對應的腳本特性爲boxReflect
下面的實例定義一個簡單的倒影樣式,若咱們想要爲下面一幅圖增長一個在水中的倒影,咱們就須要簡單的利用CSS3的box-reflect特性添加倒影,原圖以下:
經咱們使用CSS爲其添加box-reflect屬性後就造成了這兩座山的倒影,效果以下:
該實例的代碼以下:
使用瀏覽器直接打開這個文件,就能夠看到瀏覽器對這個網頁文件解釋後的結果,圖片被加上了倒影,如圖1所示。
圖1 倒影
咱們在上例倒影基礎上繼續改進,爲倒影設置距離,向下偏移2像素,倒影效果如圖2所示:
圖2 倒影向下偏移2px
修改的CSS代碼以下:
接下來繼續進行改進,設計css漸變倒影,經過漸變遮罩逐漸蓋住下面的倒影,製做出漸隱效果。效果圖如圖3所示:
圖3 倒影漸隱效果
css代碼以下:
另外,咱們除了能夠爲圖片咱們設計倒影外,網頁上的任何對象均可以設計css倒影效果,下面的實例是將文本設計爲倒影效果。效果如圖1.30所示:
圖1.30 文本倒影效果
文本倒影的HTML代碼以下:
倒影效果不會對其它元素產生影響,不會影響頁面佈局。固然,頁面上的任何元素均可以用CSS3製做成倒影的形式,視頻也不例外。