講解如何用CSS3的box-reflect設(shè)置文字倒影效果
語法：
CSS Code復(fù)制內(nèi)容到剪貼板 box-reflect：none|??=above|below|left|rightright=|=none|||||
默認(rèn)值：none
適用于：所有元素
繼承性：無
取值：
none：無倒影
Demo: 簡(jiǎn)單圖片倒影 See with Webkit
above：指定倒影在對(duì)象的上邊
below：指定倒影在對(duì)象的下邊
left：指定倒影在對(duì)象的左邊
right：指定倒影在對(duì)象的'右邊
Demo: 圖片與倒影間隔 See with Webkit
�。河瞄L(zhǎng)度值來定義倒影與對(duì)象之間的間隔�？梢詾樨�(fù)值
�。河冒俜直葋矶x倒影與對(duì)象之間的間隔�？梢詾樨�(fù)值
Demo: 更真實(shí)的圖片倒影 文字倒影與漸變 See with Webkit
none：無遮罩圖像
�。菏褂媒^對(duì)或相對(duì)地址指定遮罩圖像。
�。菏褂镁�性漸變創(chuàng)建遮罩圖像。
�。菏褂脧较�(放射性)漸變創(chuàng)建遮罩圖像。
：使用重復(fù)的線性漸變創(chuàng)建背遮罩像。
�。菏褂弥貜�(fù)的徑向(放射性)漸變創(chuàng)建遮罩圖像。
如果你需要一個(gè)簡(jiǎn)單倒影，你可以這樣做：
代碼
CSS Code復(fù)制內(nèi)容到剪貼板 box-reflect:below;
效果
注意設(shè)置倒影元素的padding是會(huì)影響倒影位置的
允許你定義倒影與元素之間的距離：
代碼
CSS Code復(fù)制內(nèi)容到剪貼板 box-reflect:below10px;
效果
允許你用Gradient圖像或image作為遮罩：
代碼
CSS Code復(fù)制內(nèi)容到剪貼板 box-reflect:below1pxlinear-gradient(transparent,transparent50%,rgba(0,0,0,.3));
效果
【講解如何用CSS3的box-reflect設(shè)置文字倒影效果】相關(guān)文章：
Word報(bào)刊段落頭文字大字效果的設(shè)置方法06-23
iOS應(yīng)用中UILabel文字顯示效果的常用設(shè)置小結(jié)06-28
PS給文字或者圖片加倒影03-31
基于css3的屬性transition制作菜單導(dǎo)航效果11-11
使用CSS3來實(shí)現(xiàn)滾動(dòng)視差效果的教程11-11
如何用PS制作郵票效果03-15
Photoshop動(dòng)態(tài)效果設(shè)置11-22
如何用Illustrator制作真實(shí)圖章效果03-14
CSS3制作炫酷的自定義發(fā)光文字11-11