如何用HTML和CSS实现solo.to风格的Linktree卡片？

要实现你要的这种图片覆盖在容器边框上、文本内容适配布局的效果，单纯用float:left无法达成“边框穿过图片”的视觉表现，推荐用相对定位+绝对定位或者浮动+shape-outside两种方案实现，具体代码如下：

方案一：固定布局（适合方形头像） #

HTML 结构 #

<div class="linktree-container">
  <img src="你的头像地址" alt="个人头像" class="profile-img">
  <div class="content">
    <h2>你的名字</h2>
    <p>简短个人简介</p>
    <a href="#" class="link-item">链接1</a>
    <a href="#" class="link-item">链接2</a>
    <a href="#" class="link-item">链接3</a>
  </div>
</div>

CSS 样式 #

.linktree-container {
  width: 320px;
  border: 2px solid #000;
  border-radius: 12px;
  padding: 20px;
  padding-left: 100px; /* 预留图片位置，值=图片宽度+额外间距 */
  position: relative;
  background: #fff;
}

.profile-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: -2px; /* 与容器边框宽度一致，让图片顶边对齐边框 */
  left: -2px; /* 与容器边框宽度一致，让图片左边对齐边框 */
  border: 2px solid #fff; /* 白色内边框衔接容器背景，强化“边框穿图”视觉 */
}

.content h2 {
  margin-top: 0;
}

.link-item {
  display: block;
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  background: #f0f0f0;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  color: #333;
}

.link-item:hover {
  background: #e0e0e0;
}

方案二：文本环绕布局（适合非方形图片） #

如果需要文本沿着图片轮廓自然排列，可以用shape-outside配合浮动实现：

CSS 样式调整 #

.linktree-container {
  width: 320px;
  border: 2px solid #000;
  border-radius: 12px;
  padding: 20px;
  overflow: hidden; /* 让容器高度包含浮动元素 */
  background: #fff;
}

.profile-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  float: left;
  margin-left: -100px; /* 让图片超出容器左侧 */
  margin-top: -20px; /* 让图片超出容器顶部 */
  shape-outside: circle(50%); /* 文本沿圆形轮廓排列 */
  border: 2px solid #fff;
}

效果说明 #

• 方案一通过绝对定位让图片覆盖在容器边框上，预留padding避免文本被遮挡，实现简洁的固定布局
• 方案二利用shape-outside让文本贴合图片轮廓，适合不规则形状的图片，视觉更自然

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