一、什么是CSS Blur

CSS Blur是CSS3中的一個濾鏡效果，用于給圖像或元素添加模糊效果。通過對元素進行高斯模糊來實現圖像的模糊效果，這種模糊效果不會破壞圖片或元素的結構和顏色，而且可以通過控制模糊程度來達到不同的效果。

二、CSS Blur的基本寫法及常規屬性

/* 基本寫法 */
selector {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

/* 常規屬性 */
blur(radius)：模糊半徑，支持px和%作為單位，取值范圍為0到任意大的數值，默認為0；

在寫CSS Blur時，我們需要注意瀏覽器兼容問題。Webkit內核的瀏覽器需要加上前綴"-webkit-"。

三、CSS Blur的應用

1.為背景圖添加模糊效果

.blur-bg {
    background-image: url('img.jpg');
    background-size: cover;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

這里通過設置背景圖來理解CSS Blur的應用。blur-bg類會將指定圖片作為背景圖，并且將背景圖進行模糊化處理，半徑為5個像素。

2.為文本添加模糊效果

.blur-text {
    color: transparent;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

這里的.blur-text類會將文本模糊化處理。需要將文本顏色設置為透明（transparent），并在文本周圍添加陰影，用于讓文本在模糊處理之后有更好的視覺效果。

四、CSS Blur的優化建議

在使用CSS Blur時需要注意以下方面：

1.盡可能少使用Blur

使用Blur的次數越多，網頁性能就會越低。所以，只要在影響外觀的位置使用Blur即可，比如在背景圖上使用。

2.控制半徑大小

半徑越大，性能就會越低。如果需要對整個網頁應用模糊效果，可以使用已優化過的圖像或者創建波紋背景使得給人一種模糊的錯覺。

3.跟進最新技術

CSS Blur的原理是對整個圖像進行高斯模糊。新技術，比如CSS Mask或Webkit Clip，都可以對模糊效果進行更精確的控制。

五、總結

CSS Blur是CSS3中的一種濾鏡效果，可以實現對圖像或元素的模糊效果。通過對半徑大小的控制，可以實現不同效果。在應用CSS Blur時，需要注意性能和兼容性問題。