如何实现Instagram故事风格的静态渐变圆形头像边框？

方法1：双层容器法（最直观可靠） #

这是最容易理解和维护的方案，通过外层容器实现渐变边框，内层放头像，用padding控制边框与头像的间距。

<div class="avatar-container">
  <img src="你的头像地址" alt="头像" class="avatar-img">
</div>

.avatar-container {
  /* 容器尺寸 + padding 决定整体大小 */
  width: 136px;
  height: 136px;
  /* padding值就是边框与头像的间距 */
  padding: 8px;
  border-radius: 50%;
  /* 自定义渐变，可替换为Instagram橙粉渐变 */
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 保证头像填充圆形容器且不失真 */
  object-fit: cover;
}

方法2：单元素多层背景法（无需额外HTML） #

用CSS多层背景实现，不需要额外容器，直接给img标签设置样式：

<img src="你的头像地址" alt="头像" class="avatar-single">

.avatar-single {
  /* 头像本身的尺寸 */
  width: 120px;
  height: 120px;
  /* 间距大小 */
  padding: 8px;
  border-radius: 50%;
  /* 第一层：渐变边框（覆盖整个元素范围）；第二层：头像（仅显示在padding内侧） */
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) border-box,
              url('你的头像地址') center/cover content-box;
  border: none;
}

方法3：伪元素法（无额外HTML结构） #

用元素的伪元素生成渐变边框，适合不想修改HTML结构的场景：

<img src="你的头像地址" alt="头像" class="avatar-pseudo">

.avatar-pseudo {
  width: 120px;
  height: 120px;
  /* 给伪元素留出显示空间 */
  margin: 8px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
}

.avatar-pseudo::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  z-index: -1;
}

为什么border-image不行？ #

border-image会忽略border-radius的圆角设置，这是CSS的固有特性——border-image本质是将渐变/图片切片填充到边框区域，无法适配圆角，所以之前的方案会出现方形边框问题。

内容的提问来源于stack exchange，提问作者Filou