前言

本文主要給大家介紹了關于CSS3倒影實現的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

效果圖如下：

示例圖片

在CSS3之前，想要實現示例圖片這樣的一個倒影效果一般只能通過處理圖片的方式，而CSS3問世之后，想要實現這樣的效果變得非常簡單，只需一個CSS3屬性就可以輕松實現了。

這就是今天所要提到的box-reflect屬性。

咱們先看看W3C給出的box-reflect語法：

box-reflect可給兩種屬性值，一種是none，為默認值，也就是沒有任何倒影效果，另一種才是我們今天所要講的，它可以同時賦予三個屬性值，它們依次代表倒影方向、元素與倒影之間的距離以及加在倒影上的遮罩圖像，其中后兩個屬性值可以缺省，但如果<mask-box-image>存在，則<offset>必填。

說了那么多干巴巴的解釋，還是聯系一下示例應該更好理解些吧。

我們現在來一步步地實現文章開頭示例圖片的投影效果：

①只給一個屬性值below。

實現效果：

②再加個5px的間距。

實現效果：

③最后加個圖片遮罩吧。

這里的圖片遮罩沒有用圖片，而是用了CSS3中的linear-gradient屬性值，它就是用于線性漸變，具體用法這里就不提了，可以直接看這里（http://www.survivalescaperooms.com/css/369475.html)，寫得很詳細。