目前為止我們已經(jīng)探討了很多CSS3中的新功能和新特征。除了上面這些，實(shí)際上還有很多CSS新屬性并未包含進(jìn)CSS3官方標(biāo)準(zhǔn)中，像谷歌瀏覽器或火狐瀏覽器等都會(huì)利用CSS的瀏覽器引擎前綴(VendorPrefix)來(lái)實(shí)現(xiàn)很多自定義的CSS功能。-webkit-box-reflect屬性就是以谷歌瀏覽器為代表的Webkit渲染引擎獨(dú)有的特征。-webkit-box-reflect的作用是讓圖片出現(xiàn)倒影。
實(shí)現(xiàn)倒影的基本語(yǔ)法
實(shí)現(xiàn)倒影的基本語(yǔ)法非常的直觀，假設(shè)我們想給下面的圖片增加倒影效果，可以這樣寫(xiě)：
img{
-webkit-box-reflect:below;
}
上面這個(gè)例子中倒影出現(xiàn)了圖片的下方，但實(shí)際上我們也可以將倒影安置在左側(cè)、右側(cè)或上側(cè)。
倒影偏移量
Offset屬性值用來(lái)定義圖片和倒影影像之間的間距。參考下面的代碼：
img{
-webkit-box-reflect:below10px;
}
上面的代碼中，我們使圖片和倒影影像之間相聚10px；
給倒影增加消隱效果
在現(xiàn)實(shí)生活中，倒影的出現(xiàn)通常是上半部比較清晰，下面半部逐漸消隱。為了在CSS中實(shí)現(xiàn)這種效果，我們需要運(yùn)用CSS3漸變色(Gradients)功能，就像下面這樣：
-webkit-box-reflect:below0px-webkit-gradient(linear,lefttop,leftbottom,from(transparent),to(rgba(250,250,250,0.1)));
這段代碼就能達(dá)到這樣的效果：
我們還可以使用color-stop來(lái)控制色彩過(guò)渡，讓倒影更加漂亮：
img{
-webkit-box-reflect:below0px-webkit-gradient(linear,lefttop,leftbottom,from(transparent),color-stop(70%,transparent),to(rgba(250,250,250,0.1)));
}
火狐瀏覽器中倒影的實(shí)現(xiàn)
目前只有Webkit瀏覽器(谷歌瀏覽器和Safari瀏覽器)實(shí)現(xiàn)box-reflect屬性。為了在火狐瀏覽器中也實(shí)現(xiàn)倒影功能，我們需要尋找另外的途徑：使用-moz-element()方法。這個(gè)方法能夠復(fù)制指定網(wǎng)頁(yè)元素的內(nèi)容。讓我們來(lái)看看下面的例子：
我們把圖片包裹著一個(gè)ID是someid的<div>里。
并且，為了存放倒影影像，我們將使用:before偽元素，就像下面：
#someid{
position:relative;
/*給倒影留下空間*/
margin-bottom:120px;
}
#someid:before{
content:"";/*neededornothingwillbeshown*/
background:-moz-linear-gradient(top,white,white30%,rgba(255,255,255,0.9)65%,rgba(255,255,255,0.7))0px0px,
-moz-element(#someid)0px-127pxno-repeat;
-moz-transform:scaleY(-1);/*fliptheimagevertically*/
position:relative;
height:140px;
width:360px;/*需要>imagewidth+margin+shadow*/
top:247px;
left:0px;
}
這里的-moz-transform是一個(gè)負(fù)值，作用就是讓復(fù)制過(guò)來(lái)的圖形上下顛倒，達(dá)到倒影的效果。為了讓:before偽元素跟原始圖形相配合，我們需要移動(dòng)它的位置。這里的背景偏移量(-127px)是:before偽元素高(140px)–(圖片的高(247px)+div的border(20px))。需要注意的是，火狐瀏覽器版的倒影實(shí)現(xiàn)只能用在頁(yè)面的背景是真實(shí)背景。背景色要和:before偽元素使用的漸變色的顏色一致。
因?yàn)樗械膶傩远际莵?lái)實(shí)現(xiàn)倒影的，而且這些屬性都有火狐瀏覽器獨(dú)有的前綴，和Webkit的倒影不沖突，所以在代碼在可以把兩個(gè)版本倒影方法都寫(xiě)上，保證兩種瀏覽器里都有效果。
視頻倒影
官方文檔中說(shuō)當(dāng)?shù)褂暗膶?shí)體內(nèi)容變化時(shí)，倒影的內(nèi)容也會(huì)相應(yīng)更新。因此，這種技術(shù)用在視頻是有特殊的效果。
CSS倒影技術(shù)在火狐瀏覽器中的小問(wèn)題
有時(shí)，火狐瀏覽器生成的漸變色圖形會(huì)比背景元素稍微小一些，導(dǎo)致有一些間隙線出現(xiàn)。為了避免這種情況出現(xiàn)，在:before偽元素的頂部和底部加1px的padding，并且分別設(shè)置背景的裁剪方式和原點(diǎn)：
padding:1px0px;
background-origin:border-box,content-box;
background-clip:border-box,content-box;
