CSS模糊+边框半径

Question

找不到将模糊和边框半径应用于图像togather的方法。我想看到的是带圆角的模糊图像：

例如，当我尝试这样做时：

.outer {
    overflow: hidden;
    border-radius: 10px;
}
.inner {
    background-image: url(...);
    width: 100px;
    height: 100px;
    -webkit-filter: blur(3px);
}

我得不到我想要的，没有正确应用border-radius：

Answer 1

试试这个......可能会帮助你

＆＃13;

＆＃13;

<div class="outer"><img src="http://4.bp.blogspot.com/-8RE5IWXFmmA/T9TQNJr6f1I/AAAAAAAABDw/FC7jbgZocys/s1600/fb-profile.jpg" class="inner" /></div>

<style>
.outer {
    overflow: hidden;
    border-radius: 10px;	
    width: 100px;
    height: 100px;
}
.inner {
    width: 100px;
    height: 100px;
    -webkit-filter: blur(3px);
}
</style>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我们需要你的整个代码，也许可以试试这个：

.inner {
    background-image: url(...);
    width: 100px;
    height: 100px;
    border-radius: 10px;
    -webkit-filter: blur(3px);
}