實際上還有很多css新屬性並未包含進css3官方標準中。-webkit-box-reflect屬性就是以谷歌瀏覽器為代表的webkit渲染引擎獨有的特徵。-webkit-box-reflect的作用是讓出現倒影。
html：
img如果希望倒影和之間有空隙可是設定css樣式：
img效果如圖：
實現漸變效果的css如下：
img效果如下：
但是，此方法只能適用於webkit核心的瀏覽器。要想可以相容火狐瀏覽器，接下來，介紹另外一種方法。
html**如下：
*
.wrap
.image
.down
.reflection
.overlay
filter為過濾器，定義的可視效果，模糊與飽和度等。
background-image：-moz-linear-gradient，設定的漸變。
看著css**多，其實並不是很難，很多都是加各種瀏覽器的字首，解決相容性問題。
效果圖：
使用CSS3製作倒影
webkit box reflect仍然是乙個非標準屬性,目前僅在chrome safari和opera瀏覽器下支援,可惜的是在firefox下並不支援這個屬性，不過值得慶幸的是，在firefox下可以通過element svg的mask來模擬實現.webkit box reflect none k...
css3 倒影和變形
倒影 語法 webkit box reflect direction above below left right 間距 畫素值 注意1.倒影產生的效果不在標準流之內 2.對box模型產生倒影 倒影加漸變 單純使用倒影，於原圖區分不大，顯示不出效果，倒影一般與漸變配合使用 語法 webkit box...
CSS3製作文字半透明倒影效果
效果如圖。ps 背景線條是背景圖勒，和本文效果無關。html 如下 html div div 有兩種實現方式 1.box reflect 屬性詳情見 屬性 邊框 box reflect css content h3 但是box reflect屬性只有chrome safari支援 支援詳情見 ff和...