如何使用Jetpack Compose实现带图标、边框内嵌文字的UI效果

下面提供2种常用的前端实现方式，都不需要引入额外依赖：

方案1：纯CSS手动定位实现（自定义程度最高） #

利用绝对定位+背景遮挡的逻辑实现，适配所有场景，支持自定义所有样式细节。

代码示例 #

HTML结构

<div class="border-card">
  <div class="card-header">
    <span class="header-icon">🔔</span>
    <span class="header-text">提示</span>
  </div>
  <div class="card-content">
    这里是卡片内部的内容，可以是任意文本、图片、组件等，支持自适应宽高。
  </div>
</div>

CSS样式

/* 外层边框容器 */
.border-card {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 28px 16px 16px;
  margin: 12px 0;
  background: #ffffff;
}
/* 顶部带图标的标题栏 */
.card-header {
  position: absolute;
  top: -10px;
  left: 16px;
  /* 用和背景一致的颜色盖住底层边框，实现内嵌效果 */
  background: #ffffff;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #1f2937;
}
/* 图标样式，可替换为字体图标、svg等 */
.header-icon {
  font-size: 16px;
}
/* 内容区域 */
.card-content {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
}

自定义调整说明 #

• 修改边框颜色、粗细、圆角，直接调整.border-card的对应属性即可
• 修改标题位置、文字大小、颜色，调整.card-header的对应参数即可
• 如果父容器背景不是纯色，可以用clip-path裁切边框的方式替换背景遮挡逻辑，避免适配问题

方案2：原生HTML标签实现（代码最简洁） #

用HTML原生的fieldset+legend标签实现，天生支持边框内嵌文字的效果，不需要手动写定位逻辑。

代码示例 #

HTML结构

<fieldset class="native-card">
  <legend class="card-header">
    <span class="header-icon">⚠️</span>
    <span class="header-text">警告</span>
  </legend>
  <div class="card-content">
    这里是原生标签实现的内容区域，代码量更少，兼容性好。
  </div>
</fieldset>

CSS样式

.native-card {
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
}
.card-header {
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #d97706;
  width: fit-content;
}

注意事项 #

该方案的legend标签样式自定义空间比方案1稍小，适合对样式要求不复杂的场景使用。

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