css - 非常に小さなぼかし効果を作成するにはどうすればよいですか？

Question

-webkit-filter（または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);
}

これを参照してください：クリック...