用CSS3的box-reflect設(shè)置文字倒影效果的方法講解
我要評(píng)論語法：
- box-reflect：none | <direction> <offset>? <mask-box-image>?
- <direction> = above | below | left | rightright
- <offset> = <length> | <percentage>
- <mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
默認(rèn)值：none
適用于：所有元素
繼承性：無
取值：
none：無倒影
<direction> Demo: 簡單圖片倒影 See with Webkit
above：指定倒影在對(duì)象的上邊
below：指定倒影在對(duì)象的下邊
left：指定倒影在對(duì)象的左邊
right：指定倒影在對(duì)象的右邊
<offset> Demo: 圖片與倒影間隔 See with Webkit
<length>：用長度值來定義倒影與對(duì)象之間的間隔?？梢詾樨?fù)值
<percentage>：用百分比來定義倒影與對(duì)象之間的間隔?？梢詾樨?fù)值
<mask-box-image> Demo: 更真實(shí)的圖片倒影 文字倒影與漸變 See with Webkit
none：無遮罩圖像
<url>：使用絕對(duì)或相對(duì)地址指定遮罩圖像。
<linear-gradient>：使用線性漸變創(chuàng)建遮罩圖像。
<radial-gradient>：使用徑向(放射性)漸變創(chuàng)建遮罩圖像。
<repeating-linear-gradient>：使用重復(fù)的線性漸變創(chuàng)建背遮罩像。
<repeating-radial-gradient>：使用重復(fù)的徑向(放射性)漸變創(chuàng)建遮罩圖像。
如果你需要一個(gè)簡單倒影，你可以這樣做：
代碼
- box-reflect: below;
效果
注意設(shè)置倒影元素的padding是會(huì)影響倒影位置的
<offset>允許你定義倒影與元素之間的距離：
代碼
- box-reflect: below 10px;
效果
<mask-box-image>允許你用Gradient圖像或image作為遮罩：
代碼
- box-reflect: below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3));
效果
相關(guān)文章
CSS3制作文字半透明倒影效果的兩種實(shí)現(xiàn)方式
CSS3制作文字半透明倒影效果，可以使用box-reflect以及transform屬性的scaleY方式，下面是具體的實(shí)現(xiàn)代碼，需要的朋友可以參考下2014-08-08- 無需flash，完全用css就可以做出超炫的圖片倒影效果,大伙不要不信；網(wǎng)上流傳很多種版本，經(jīng)過本人的一番研究，做成能夠兼容firefox、chrome、IE等各主流瀏覽器的版本，跟大2012-12-27
Css3實(shí)現(xiàn)帶倒影的3D圖片走廊的效果代碼
個(gè)小demo是HTML5&CSS3實(shí)現(xiàn)的帶倒影的3D圖片走廊，主要用到了CSS3里的漸變和轉(zhuǎn)換2012-08-22
