[分享]css中如何截取图片四周

CSS可以用来实现截取图片四周的效果，具体操作方法如下：

.img-container {
  position: relative;
  overflow: hidden;
}

.img-container::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 20px solid #000; // 20px为截取边框的宽度
  box-sizing: border-box;
  z-index: 1;
}

.img-container img{
  position: relative;
  z-index: -1;
} 

首先我们需要给容器添加一个相对定位的position属性以及overflow: hidden属性，这样就可以隐藏超出容器的部分。

然后我们使用伪元素::before来给容器添加一个类似于边框的效果，使用绝对定位的方式把它置于容器顶部，再通过border属性设置边框的宽度和颜色实现截取效果。

最后给图片添加一个相对位置的属性，把它置于容器的底部，然后通过z-index属性把图片放到伪元素下面，从而实现截取图片四周的效果。