一、Css Blur()
blur() CSS 方法将高斯模糊应用于输出图片. 结果为 <filter-function>.
blur(radius)
radius模糊的半径，值为<length>。 它定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生更多模糊。 值为0会使输入保持不变。 该值为空则为0。
blur(0) /* No effect */ blur(8px) /* Blur with 8px radius */ blur(1.17rem) /* Blur with 1.17rem radius */
二、使用示例：
filter: blur(0);
filter: blur(4px);
filter: blur(1.5rem);
2.示例：
<!DOCTYPE html> <html> <head> <style> img { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px); } </style> </head> <body> <p>图片使用高斯模糊效果:</p> <img src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p> </body> </html>
更多：