CSS是網(wǎng)頁設(shè)計中非常重要的一部分，其可實現(xiàn)多種不同的效果，其中包括模糊和倒影。CSS3中提供了新的屬性，使其更加容易實現(xiàn)模糊和倒影效果。

.box {
width: 300px;
height: 300px;
background: url(image.jpg);
/* 設(shè)置模糊效果 */
-webkit-filter: blur(10px);
filter: blur(10px);
/* 設(shè)置倒影效果 */
-webkit-box-reflect: below 1px rgba(0,0,0,0.3);
box-reflect: below 1px rgba(0,0,0,0.3);
}

CSS3中的模糊效果可以使用 blur屬性輕松實現(xiàn)。我們只需要設(shè)置blur值的大小即可。在上面的代碼中，我們設(shè)置模糊效果的值為10px。注意，該效果的兼容性并不好，只在IE9+和其他現(xiàn)代瀏覽器中有效。

CSS3中的倒影效果可以使用 box-reflect屬性實現(xiàn)。我們需要設(shè)置倒影的位置和大小，以及顏色和透明度。上面的代碼中，我們設(shè)置了倒影的大小為1像素，顏色為黑色，透明度為0.3。注意，該效果也只在一些現(xiàn)代瀏覽器中有效，需要特別注意兼容性問題。

模糊和倒影效果是網(wǎng)頁設(shè)計中常見的效果之一，使用CSS3使得它們更加容易實現(xiàn)。但是需要注意的是兼容性問題，不能僅僅讓網(wǎng)站在現(xiàn)代瀏覽器中運(yùn)行良好，還需要考慮到舊版瀏覽器的兼容性。