设置border-radius的图片hover添加blur后圆角失效的解决方法

我给设置了border-radius属性的图片添加了hover状态下的模糊效果，但触发hover时，模糊效果生效，border-radius属性却失效了。尝试给不同类添加border-radius，但都没有效果。

原有相关代码 #

.entry-thumbnail {
    position: relative;
    .entry-thumbnail:after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        opacity: 0;
        transition: opacity 200ms linear;
    }
}

a:hover .entry-thumbnail:after {
    opacity: 1;
}

.secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    opacity: 0;
    transition: opacity 200ms linear;
}
a:hover .secondary, a.hover .secondary {
    opacity: 1;
}

我添加的代码 #

img {
    border-radius: 10px;
}

img:hover {
    -webkit-filter: blur(4px); /* Chrome, Safari, Opera */
    filter: blur(10px);
}

解决办法 #

核心原因是：滤镜模糊会生成超出图片原边界的模糊内容，而border-radius只能裁剪元素本身的可视区域，管不住这些溢出的模糊部分，所以看起来圆角就失效了。

解决思路是给图片的父容器.entry-thumbnail加上overflow: hidden，把溢出的模糊内容裁剪掉，同时给父容器设置和图片一致的border-radius：

.entry-thumbnail {
    position: relative;
    border-radius: 10px; /* 和图片圆角保持一致 */
    overflow: hidden; /* 关键：裁剪溢出的模糊效果 */
    /* 保留原有嵌套样式 */
    .entry-thumbnail:after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        opacity: 0;
        transition: opacity 200ms linear;
    }
}

img {
    border-radius: 10px; /* 可选：如果父容器加了圆角，这里也可以去掉 */
    width: 100%; /* 确保图片填满父容器，避免出现间隙 */
    height: auto;
}

img:hover {
    -webkit-filter: blur(4px);
    filter: blur(10px);
}

这样处理后，hover时的模糊效果会被父容器的圆角和overflow:hidden约束，不会超出圆角边界，圆角就能正常显示了。

内容的提问来源于stack exchange，提问作者rtk