如何实现border边框位于文本后方的前端展示效果？

云上老周

2026-9-24

实现方案

以下是两种可直接运行的纯CSS实现方式，兼容所有主流浏览器：

方案1：伪元素定位实现（最常用，适配性最高）

核心是通过绝对定位把边框元素放在文字层下方，可灵活调整偏移量、边框样式：

<style>
.design-text {
  position: relative;
  display: inline-block;
  font-size: 48px;
  font-weight: 700;
  padding: 6px 14px;
}
.design-text::after {
  content: "";
  position: absolute;
  /* 调整这两个值控制边框和文字的错位距离 */
  top: 8px;
  left: 8px;
  width: 100%;
  height: 100%;
  border: 3px solid #2196f3;
  /* 让边框处于文字下层 */
  z-index: -1;
}
</style>

<span class="design-text">I need to make text exactly like this</span>

如果需要适配多行文本，只需要把.design-text的display属性改成inline即可。

方案2：box-shadow实现（代码更精简）

如果不需要镂空边框，只需要实心偏移色块，用这个方案代码更短：

<style>
.design-text-simple {
  display: inline-block;
  font-size: 48px;
  font-weight: 700;
  padding: 6px 14px;
  /* 参数依次为：水平偏移、垂直偏移、模糊半径、扩展半径、颜色 */
  box-shadow: 8px 8px 0 0 #2196f3;
}
</style>

<span class="design-text-simple">I need to make text exactly like this</span>

调整box-shadow的参数就可以自定义色块的大小、偏移程度和模糊效果。