如何使用父容器盒內的css3進行模糊處理？

Question

css3模糊效果會忽略父容器尺寸並導致溢出。我需要在css3中有一些內在的模糊行爲。這可能嗎？任何詭計？

HTML

<div class="box"> 
     <div class="blur"> 
      <img src="..." /> 
     </div> 
</div>​ 

CSS

.box{ 
    width: 300px; 
    height: 300px; 
    border: 1px solid red; 
} 

.blur{ 
    -webkit-filter: blur(20px); 
} 

模糊溢出例如：

http://jsfiddle.net/ngJEr/

Answer 1

.box{ 
width: 300px; 
height: 300px; 
border: 1px solid red; 
overflow:hidden; 
} 

.blur{ 
-webkit-filter: blur(20px); 
} 

http://jsfiddle.net/calder12/ngJEr/8/