我第一个想到的办法就是盒子的嵌套

通过嵌套实现boder的渐变和弧度

具体实现的代码是

<div class="background-border">
  <div class="slides">
  </div>
</div>

.background-border {
  padding: 6px;
  border-radius: 8px;
  background-image: linear-gradient(180deg, rgba(34, 109, 140, 1), rgba(96, 172, 187, 0.3));
}
.slides {
  background-color: black;
  border-radius: 8px;
  background-image: url('../../assets/images/7_1.jpg');
  background-size: 100% 100%;
}

这种实现方式存在一个问题，当slides的颜色为透明的时候，这会出现底色不满足需要

实操案例：bg + overflow 实现渐变边框 (codepen.io)

针对这一问题尝试了新的解决方案，使用background-clip

background-clip的

border-box意味着背景图铺满整个盒子，能够实现图片内嵌相框吃掉周边的效果

padding-box意味着背景图片仅在内边距框，实现图片在相框内完全展示的效果

content-box意味着背景图片仅在内容框中展示，会出现留白效果

使用这一方案之后能够实现圆角渐变，不过需要使用 background-origin，

语法：

background-origin:属性值;

说明

属性值

属性值	说明
border-box	从边框区域（含边框）开始显示背景图像
padding-box	默认值，从内边距区域（含内边距）开始显示背景图像
content-box	从内容区域（含内容）开始显示背景图像

实操案例：background-clip 实现渐变边框 (codepen.io)