如何实现顶部分段带文字的CSS边框？解决圆角及空隙左移问题

需求回顾 #

需要制作一个边框，顶部分为两段，两段间距约80px，空隙内放置文字「Gold」，要求仅用HTML和CSS实现，同时保留边框圆角，顶部空隙在左侧。

原代码问题分析 #

• 原代码仅给.frame设置了左、右、下边框，顶部用两个独立div模拟线条，导致顶部线条与左右边框的圆角无法衔接，无法呈现完整的圆角效果。
• 顶部线条使用justify-content: space-between+margin-right的方式，使空隙位于中间，不符合左侧空隙的要求。

修改后的实现代码 #

HTML结构

<div class="frame">
    <span class="gold-label">Gold</span>
    <div class="content">
        <!-- 这里填充你的内容 -->
    </div>
</div>

CSS样式

body {
    background: #333;
    padding: 30px; /* 给页面留出边距，方便查看效果 */
}

.frame {
    position: relative;
    /* 保留左、右、下边框，去掉顶部边框 */
    border: 1px solid #fff;
    border-top: none;
    border-radius: 17px;
    padding: 20px;
    padding-top: 30px; /* 顶部留出空间放置文字，避免内容被遮挡 */
}

/* 模拟顶部右侧的边框 */
.frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 80px; /* 从左侧80px的位置开始绘制顶部边框，形成左侧空隙 */
    right: 0;
    height: 1px;
    background-color: #fff;
    border-top-right-radius: 17px; /* 匹配容器的右上圆角 */
}

/* 放置Gold文字 */
.gold-label {
    position: absolute;
    top: -10px; /* 让文字垂直居中于边框高度 */
    left: 10px; /* 调整文字在空隙内的水平位置 */
    color: #fff;
    background-color: #333; /* 用背景色覆盖下方的边框空隙 */
    padding: 0 5px; /* 左右留白，让文字与边框间有间距 */
}

关键实现说明 #

1. 圆角衔接：通过给容器保留左、右、下边框并设置border-radius，同时用伪元素绘制顶部右侧边框并设置对应圆角，保证整体圆角效果完整。
2. 左侧空隙：伪元素的left: 80px直接控制顶部边框的起始位置，形成左侧80px的空隙。
3. 文字定位：利用绝对定位将文字放在空隙处，并用与页面背景同色的background-color覆盖下方的边框区域，实现文字与边框的融合。

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