在CSS中实现模糊效果可以使用CSS的filter属性。其中，模糊效果可以通过blur()函数来实现。
示例代码如下：
HTML：
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>CSS模糊效果示例</title> 5. <link rel="stylesheet" type="text/css" href="styles.css"> 6. </head> 7. <body> 8. <div class="blurry-box"> 9. <p>这是一个模糊效果示例文本。</p> 10. </div> 11. </body> 12. </html>
CSS (styles.css)：
1. body { 2. font-family: Arial, sans-serif; 3. background-color: #f0f0f0; 4. } 5. 6. .blurry-box { 7. background-color: #ffffff; 8. width: 300px; 9. padding: 20px; 10. margin: 50px auto; 11. text-align: center; 12. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 13. filter: blur(5px); /* 应用模糊效果，数字可以调整模糊程度 */ 14. }
在这个例子中，我们创建了一个带有模糊效果的盒子。通过在CSS的.blurry-box类中设置filter: blur(5px);，我们将给这个盒子应用5像素的模糊效果。你可以调整blur()函数中的值来改变模糊的程度。值越大，模糊越明显。
请注意，filter属性还可以用于其他效果，如grayscale（灰度）、sepia（深褐色）、brightness（亮度）、contrast（对比度）、saturate（饱和度）等。你可以尝试不同的值和组合来实现不同的视觉效果。
