我該如何製作非常小的模糊效果？

Question

如何使用-webkit-filter（或filter）在1px和0之間創建非常小的模糊效果？

我已經嘗試過1EM和0.01em但據該過濾器重新計算這個像素及以下，如果是低於1px的下降則是無殘影可言之間東西..

Answer 1

一想，我想告訴你這個類型的特點在CSS3不適用，因爲它不具有完全的支持，但CSS的未來可以提供這個功能...

不管怎麼說-webkit-filter只適用於鉻只... 所以，代碼就像那對你有用，

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

參見此：Click...

Answer 2

這裏是一個相當複雜的解決方案，它包括複製一些內容： http://jsfiddle.net/BWj28/1/

它通過複製所述內容框的4倍，通過1個像素中的每個方向上移位replicants並計算適合複製品的不透明度。上面的版本需要不透明的背景。

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