CSS3中的倒影效果非常大氣磅礴，給頁面帶來了獨特的美感。但是，不同瀏覽器對于CSS的支持有所不同，會導致倒影在一些瀏覽器上無法正常顯示。所以在進行倒影的設計時，需要注意其兼容性問題。

在進行倒影效果的實現時，需要使用CSS3中的屬性box-reflect，這個屬性可以設置元素的倒影樣式。但是這個屬性只有Webkit內核的瀏覽器支持，比如Chrome、Safari等。而在FF和IE瀏覽器中是不支持該屬性的，所以倒影效果無法實現。

那么在進行倒影效果的兼容性設計時，可以使用CSS2中的filter屬性，該屬性在IE瀏覽器中有很好的支持，可以通過它來實現倒影效果。但是在FF瀏覽器中不支持該屬性，所以需要結合使用其他方法來實現倒影效果。

.box{
width:200px;
height:200px;
background-color:#f0f;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(white));
filter:Flipv();/*IE瀏覽器*/
}

在上述代碼中，我們通過box-reflect屬性來實現倒影效果，并且使用了-webkit-的前綴來適應WebKit內核瀏覽器。而在IE瀏覽器中，我們則通過filter屬性中的Flipv()函數來實現倒影效果。

需要注意，Flipv()函數只能作用在單個元素上，無法實現多個元素的倒影效果，所以在進行倒影效果的設計時，需要注意該細節問題。