如何用HTML和CSS实现Outlined标签部分隐藏边框的效果？

下面分两种常见场景给出实现方案：

场景1：独立的Outlined标签（边框在文字处断开） #

这种标签的边框会在文字所在区域被“打断”，整体背景保持透明。

HTML结构 #

<span class="outlined-tag">用户标签</span>

CSS + JavaScript实现 #

.outlined-tag {
  position: relative;
  display: inline-block;
  padding: 8px 12px;
  font-size: 14px;
  color: #333;
  background: transparent; /* 强制背景透明 */
  /* 定义CSS变量用于动态裁剪 */
  --text-half-width: 0px;
}

.outlined-tag::before {
  content: '';
  position: absolute;
  inset: 0; /* 等同于top/right/bottom/left: 0 */
  border: 1px solid #999;
  border-radius: 4px;
  /* 通过clip-path裁剪掉文字覆盖区域的边框 */
  clip-path: polygon(
    0 0,
    calc(50% - var(--text-half-width)) 0,
    calc(50% - var(--text-half-width)) 1.2em, /* 1.2em对应文字行高，可调整 */
    calc(50% + var(--text-half-width)) 1.2em,
    calc(50% + var(--text-half-width)) 0,
    100% 0,
    100% 100%,
    0 100%
  );
  z-index: -1; /* 让边框在文字下方 */
}

// 动态计算文字宽度，设置CSS变量
document.querySelectorAll('.outlined-tag').forEach(tag => {
  const textElement = tag.firstChild || tag;
  const textWidth = textElement.offsetWidth;
  tag.style.setProperty('--text-half-width', `${textWidth / 2}px`);
});

原理说明 #

• 用伪元素::before绘制完整的边框，再通过clip-path裁剪掉文字所在的顶部区域，实现边框“断开”的效果。
• 用JavaScript动态计算文字宽度，确保裁剪区域和文字完全匹配，适配不同长度的标签文本。
• 标签本身设置background: transparent，保证背景完全透明。

场景2：输入框的浮动Outlined标签 #

这是表单中常见的效果：标签默认浮动在输入框内，聚焦/有内容时上浮到输入框顶部，同时覆盖输入框的顶部边框（背景透明）。

HTML结构 #

<div class="input-wrapper">
  <input type="text" id="email" class="outlined-input" placeholder=" ">
  <label for="email" class="floating-label">邮箱地址</label>
</div>

CSS实现 #

.input-wrapper {
  position: relative;
  display: inline-block;
}

.outlined-input {
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid #999;
  border-radius: 4px;
  background: transparent;
  outline: none;
  transition: border-color 0.2s;
}

.outlined-input:focus {
  border-color: #1976d2;
}

.floating-label {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #666;
  padding: 0 4px;
  background: transparent;
  pointer-events: none;
  transition: all 0.2s;
}

/* 输入框聚焦或有内容时，标签上浮 */
.outlined-input:focus + .floating-label,
.outlined-input:not(:placeholder-shown) + .floating-label {
  top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  color: #1976d2;
}

/* 关键：给输入框添加伪元素，裁剪顶部边框的对应区域 */
.outlined-input:focus + .floating-label::before,
.outlined-input:not(:placeholder-shown) + .floating-label::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #fff; /* 用页面背景色覆盖输入框的顶部边框，若页面背景非纯色，可改用clip-path裁剪输入框边框 */
  z-index: -1;
}

补充说明 #

如果页面背景不是纯色，上面的伪元素覆盖方法会失效，此时可以改用clip-path裁剪输入框的边框：

.outlined-input:focus,
.outlined-input:not(:placeholder-shown) {
  /* 假设标签宽度为100px，可通过JavaScript动态设置--label-width变量 */
  --label-width: 100px;
  clip-path: polygon(
    0 0,
    calc(50% - var(--label-width)/2 - 4px) 0,
    calc(50% - var(--label-width)/2 - 4px) 8px,
    calc(50% + var(--label-width)/2 + 4px) 8px,
    calc(50% + var(--label-width)/2 + 4px) 0,
    100% 0,
    100% 100%,
    0 100%
  );
}

配合JavaScript计算标签宽度，设置--label-width变量即可实现完全透明背景下的边框隐藏效果。

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