Question

如何使用-webkit-filter（或过滤器）在1px和0之间制作非常小的模糊效果？

我已经在1em和0.01em之间尝试了一些东西但是这个过滤器会重新计算到像素，如果它低于1px就会重新计算，那么它就不会模糊了。

Answer 1

这是一个非常复杂的解决方案，涉及复制一些内容： http://jsfiddle.net/BWj28/1/

它的工作原理是复制内容框4次，将复制品在每个方向上移动1个像素，并为复制者计算适当的不透明度。上述版本需要不透明的背景。

      ---
      -a-
      ---

 ---  con  ---
 -d-  ten  -c-
 ---   t   ---

      ---
      -b-
      ---

HTML示例布局：

<div class="wrap">
    <div class="a t">Hello World!</div>
    <div class="b t">Hello World!</div>
    <div class="c t">Hello World!</div>
    <div class="d t">Hello World!</div>
    <div class="content">Hello World!</div>
</div>

CSS：

.wrap {
    position: relative;
}
.a,.b,.c,.d {
    position: absolute;
}
.a { top: -1px; left:  0px; z-index:1; opacity:1;     }
.b { top: +1px; left:  0px; z-index:2; opacity:0.5;   }
.c { top:  0px; left: +1px; z-index:3; opacity:0.333; }
.d { top:  0px; left: -1px; z-index:4; opacity:0.25;  }
.wrap > div {
    background: yellow; /* any opaque background */
}

Answer 2

有人认为我想告诉你这种类型的功能未在CSS3中应用，因为它没有完全的支持，但CSS的未来可能会提供这个功能......

无论如何-webkit-filter仅适用于镀铬...... 所以，像这样的代码对你有用，

img {
  -webkit-filter: grayscale(0.5) blur(10px);
}

请参阅：Click...

如何制作非常小的模糊效果？

2 个答案: