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