css方案-如何写出周围边缘虚化的图片

原理：

原理很简单，就是借助box-shadow把图片周围覆盖上一层边缘虚化的盒子。
![在这里插入图片描述](https://img-blog.csdnimg.cn/30bd5a12f74f4940b4f5176bd0d13ea5.png

代码

        <div class="photo"> // 边缘盒子
          	<div 
	          id = "img"
	          alt="此处放置图片"  style="width: 50%;margin-left: 25%;height: 50vh;" >
	        </div> // 所要边缘模糊的图片
        </div>

#img {
  background-image: url('../../../../assets/background2.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.photo {
  position:relative;
}
.photo::after {
  position: absolute;
    content: "";
    top: 0;
    left: 25%; // 与图片位置css相同
    height: 100%;
    width: 50%;
    box-shadow: inset 30px 0px 100px 50px #6495ed, inset -31px 0px 100px 51px #6495ed;  // 关键***
}