CSS3中的box-reflect屬性可以用于創(chuàng)建圖像的倒影效果。 在此之前，要在Web中創(chuàng)建此效果需要使用JavaScript或HTML5 Canvas。 現(xiàn)在，這個(gè)過(guò)程得到了簡(jiǎn)化，僅需幾行CSS代碼即可實(shí)現(xiàn)。

.box-reflect {
-webkit-box-reflect: below 0px 
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255, 255, 255, 0.3)));
box-reflect: below 0px
gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255, 255, 255, 0.3))); 
}

上述代碼可以用于在下方創(chuàng)建一個(gè)透明的反光面。 CSS3中的box-reflect屬性有以下幾個(gè)值：

• box-reflect: none;

不使用反光效果。

• box-reflect: above | below | left | right [offset]?

使用反光效果，并指定反光面的位置和偏移量。

• box-reflect: initial | inherit;

使用初始值或繼承前一個(gè)元素的box-reflect屬性。

需要注意的是，box-reflect屬性?xún)H在WebKit瀏覽器和非標(biāo)準(zhǔn)的IE瀏覽器中得到支持。