html - 如何在父级容器框中使用 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/