圆形头像设计

<div class="relative">
  <div class="absolute -inset-4 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 blur-xl opacity-75"></div>
  <div class="relative w-40 h-40 rounded-full overflow-hidden border-4 border-white">
    <img src="avatar.jpg" alt="Avatar" class="w-full h-full object-cover">
  </div>
</div>

.rounded-full {
  border-radius: 9999px;
}

.overflow-hidden {
  overflow: hidden;
}

.object-cover {
  object-fit: cover;
}

/* 渐变背景效果 */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, #60a5fa, #8b5cf6);
}

/* 模糊发光效果 */
.blur-xl {
  filter: blur(20px);
}