CSS3新特性的倒影漸變效果，可以為網(wǎng)頁增加更多的美感及視覺效果。通過CSS3倒影漸變，可以在圖片或文字下面疊加一個(gè)漸變效果的倒影，使整個(gè)頁面更加有立體感。下面我們來看一下如何使用CSS3倒影漸變。

.image {
width: 300px;
height: 200px;
background-image: url('image.jpg');
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.8, transparent), to(rgba(255,255,255,.5)));
box-reflect: below 0px linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, transparent 80%);
}

上述代碼是一個(gè)使用CSS3倒影漸變的示例，其中box-reflect為CSS3屬性名稱，其接受兩個(gè)值：reflection-direction和reflection-offset。reflection-direction指定倒影的方向，有以下可選值：

• Above：倒影出現(xiàn)在元素上方
• Below：倒影出現(xiàn)在元素下方
• Left：倒影出現(xiàn)在元素左方
• Right：倒影出現(xiàn)在元素右方

此例中設(shè)置的為“below”，即在元素下方顯示倒影。

reflection-offset指定倒影的偏移量，大于0表示顯示在元素下方，小于0表示顯示在元素上方。此例中設(shè)置的為“0px”，即倒影以元素底部為起點(diǎn)。

-webkit-box-reflect和box-reflect是相同的CSS3屬性，不同之處在于前者適用于WebKit瀏覽器的內(nèi)核，后者適用于其他主流瀏覽器。

另外，在box-reflect屬性中，我們設(shè)置了漸變效果，即從底部逐漸透明的白色反射，通過調(diào)整不同的漸變值，可以實(shí)現(xiàn)不同的倒影效果。

總之，CSS3倒影漸變是一種很實(shí)用的效果，在網(wǎng)頁中可實(shí)現(xiàn)更加立體感的頁面設(shè)計(jì)效果，通過掌握相關(guān)的CSS3屬性，可以為我們的網(wǎng)頁設(shè)計(jì)提供更多的創(chuàng)意與發(fā)揮空間。