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

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

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

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

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

使用示例如下所示: