如何用CSS实现带线性渐变的圆角边框头像？

原代码中border-image与border-radius无法同时生效，因为border-image会覆盖边框的常规渲染逻辑，导致圆角效果失效。以下是两种可行的实现方案：

方法一：容器包裹法（兼容性好） #

通过额外的容器元素实现渐变圆角边框，逻辑直观，适配多数浏览器。

HTML 代码 #

<div class="avatar-wrapper">
  <img src="/images/profile.webp" alt="用户头像" class="card-header-user-profile">
</div>

CSS 代码 #

.avatar-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /* 渐变背景作为边框视觉效果 */
  background: linear-gradient(45deg, green, red);
  /* 内边距大小等于边框厚度 */
  padding: 2px;
}

.card-header-user-profile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

原理：容器设置渐变背景与圆角，通过padding预留出边框的空间；内部图片设置相同圆角并填满容器，视觉上形成渐变圆角边框。

方法二：单元素实现法（无需额外容器） #

利用 CSS 背景裁剪特性，直接在图片元素上实现效果，减少 HTML 层级。

HTML 代码 #

<img src="/images/profile.webp" alt="用户头像" class="card-header-user-profile">

CSS 代码 #

.card-header-user-profile {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  /* 设置渐变背景 */
  background: linear-gradient(45deg, green, red);
  /* 内边距大小等于边框厚度 */
  padding: 2px;
  /* 限制背景仅显示在 padding 区域 */
  background-clip: content-box;
}

原理：通过background-clip: content-box让渐变背景仅渲染在 padding 区域，结合圆角属性，padding 区域的渐变就成为了圆角边框，图片内容显示在中心区域。

内容的提问来源于stack exchange，提问作者Ala Eddine Menai