如何为元素的三个侧边添加部分环绕式边框？

你要的这种边框效果可以通过多层线性渐变背景实现，核心是用em单位（跟随字体大小变化）和精准的背景定位/尺寸控制，彻底摆脱固定像素值的适配问题。

最终可复用代码 #

CSS #

:root {
  --gb-nav-btn-color-hover: red;
  --border-thickness: 2px; /* 统一控制边框粗细，改数值就能全局调整 */
}

a {
  display: inline-block; /* 贴合文本宽度，不强制占满整行 */
  line-height: 1.2; /* 用相对行高适配不同字体大小 */
  padding: 0 1.5em 0.2em 0.2em; /* 给边框预留空间，用em适配字体 */
  background-image: 
    /* 左下角短横线 */
    linear-gradient(to right, var(--gb-nav-btn-color-hover) 50%, transparent 50%),
    /* 右侧竖线 */
    linear-gradient(to bottom, var(--gb-nav-btn-color-hover) 60%, transparent 60%);
  background-size: 
    1em var(--border-thickness), /* 横线的长度与粗细 */
    var(--border-thickness) 1.2em; /* 竖线的粗细与高度 */
  background-position: 
    left bottom, /* 横线固定在左下角 */
    right top; /* 竖线从右上角向下延伸 */
  background-repeat: no-repeat;
}

HTML #

<a href="">An anchor element</a>
<a href="" style="font-size: 24px;">大字体测试文本</a>
<a href="" style="font-size: 12px;">小字体短文本</a>

关键细节说明 #

• 用inline-block替代block：既保留块级元素的背景、padding属性，又能完美贴合文本长度，避免不必要的空白区域
• 全em单位适配：背景尺寸、内边距都跟随字体大小自动缩放，无论字体多大，边框比例始终一致
• CSS变量统一管理：--border-thickness变量可以一键调整所有边框的粗细，后期维护更高效
• 渐变百分比灵活调整：如果要修改横线长度、竖线高度，直接调整background-image里的百分比即可，比如把横线的50%改成70%，横线就会更长

测试上述代码，无论文本长度、字体大小如何变化，边框效果都会自动适配，完全符合需求。

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