平常我們要實(shí)現(xiàn)倒影的效果，一般的做法是使用多個(gè)DOM元素絕對定位+scale(負(fù)-1)或者rotate。這種方法的缺點(diǎn)是占據(jù)空間以及DOM元素過多。

在使用webkit內(nèi)核的瀏覽器中(chrome,safari,移動端瀏覽器)，可以使用-webkit-box-reflect屬性來實(shí)現(xiàn)倒影，語法如下所示

復(fù)制代碼 
[ above | below | right | left ]? <length>? <image>?

該值包涵了三部分：方位+偏移量+遮罩層

方位是必不可少的；在使用遮罩層的時(shí)候，偏移量是不可少的，如沒有則用零代替
?。。≈匾赫谡謱拥男Чc顏色無關(guān)，例如使用漸變顏色做遮罩，都是實(shí)色則透明，透明則暴漏原始顏色
復(fù)制代碼

使用示例如下所示：

復(fù)制代碼 
<!DOCTYPE html> <html> <head> <meta charset="utf-8"
        		
網(wǎng)友評論