css实现图片边缘模糊效果

要在CSS中实现图片的边缘模糊效果，可以使用box-shadow属性来创建一个模糊效果，并使用inset关键字使得阴影在元素内部而不是外部。但是，box-shadow只能应用于盒模型元素，如果要应用于<img>标签，需要将其放入一个容器元素中，如<div>。

以下是实现图片边缘模糊效果的示例代码：

HTML:

<div class="blur-box">
    <img src="path/to/your/image.jpg" alt="模糊效果的图片">
</div>

CSS:

.blur-box {
    position: relative;
    width: 300px; /* 或者你需要的宽度 */
    height: 200px; /* 或者你需要的高度 */
    overflow: hidden;
}
 
.blur-box img {
    width: 100%;
    height: 100%;
    display: block;
}
 
.blur-box::after {
    content: '';
    position: absolute;
    top: -10px; /* 控制模糊范围 */
    right: -10px; /* 控制模糊范围 */
    bottom: -10px; /* 控制模糊范围 */
    left: -10px; /* 控制模糊范围 */
    background: inherit;
    filter: blur(15px); /* 控制模糊程度 */
}

在这个例子中，.blur-box::after伪元素创建了一个与容器相同大小的模糊遮罩，遮罩的尺寸通过调整top, right, bottom, left属性来控制，filter: blur(15px)则负责模糊效果的程度。这样，图片的边缘就会出现模糊效果。