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

最新推荐文章于 2025-09-03 16:05:54 发布

原创最新推荐文章于 2025-09-03 16:05:54 发布 · 3.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

该文章介绍了如何利用CSS的box-shadow属性来创建一个覆盖在图片周围的边缘虚化效果。通过在图片的父元素上添加伪元素::after，并设置适当的样式，可以实现图片25%从左边开始的50%宽度的虚化边缘。关键在于box-shadow的内阴影inset和颜色值的设定。

原理：

原理很简单，就是借助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;  // 关键***
}