平常我們要實(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ǔ)法如下所示
[ above | below | right | left ]? <length>? <image>?
該值包涵了三部分:方位+偏移量+遮罩層
方位是必不可少的;在使用遮罩層的時(shí)候,偏移量是不可少的,如沒(méi)有則用零代替
?。。≈匾赫谡謱拥男Чc顏色無(wú)關(guān),例如使用漸變顏色做遮罩,都是實(shí)色則透明,透明則暴漏原始顏色
使用示例如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"延伸閱讀
學(xué)習(xí)是年輕人改變自己的最好方式
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二) 2017-07-26