css毛玻璃效果

最新推荐文章于 2025-10-18 12:01:39 发布

原创最新推荐文章于 2025-10-18 12:01:39 发布 · 477 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

html+css 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用CSS实现的毛玻璃视觉效果方法。通过多种浏览器前缀和滤镜属性，确保了广泛的兼容性。包括对FireFox、Chrome、Opera等浏览器的支持，以及IE6到IE9版本的特定实现。

以下是毛玻璃效果

.blur {    
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

   pointer-events: none; /* IE6~IE9 */
}