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

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 */
}