如何用CSS/JS实现文本打断全边框的响应式效果？

完全不用依赖图片，纯CSS就能实现你想要的效果，而且天然支持响应式。核心思路是利用定位元素的背景覆盖边框，模拟出边框被文本打断的视觉效果，具体实现步骤如下：

1. 调整HTML结构 #

首先给容器添加一个用于打断边框的文本元素（比如标题），嵌套在.sharebox内部：

<div class="sharebox">
  <h3 class="box-title">分享内容</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate tenetur corporis officia corrupti at mollitia quam deleniti minus fuga accusantium, illo aliquid, eaque aperiam voluptatibus ad optio magni hic.</p>
</div>

2. 编写CSS样式 #

通过绝对定位把标题放在容器顶部中间，用标题的背景色（和容器背景一致）覆盖掉下方的边框，同时给标题左右留出空隙，让边框的两端显示出来：

.sharebox {
  display: block;
  background: #fff;
  width: 100%;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  margin: 30px 25px 10px 0;
  border: 2px solid #777;
  padding: 40px 20px 20px; /* 顶部内边距加大，给标题留出位置 */
  position: relative;
  box-sizing: border-box; /* 确保内边距不撑大容器 */
}

.box-title {
  position: absolute;
  top: -12px; /* 向上偏移，让标题一半在边框外，一半在内部 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  background: #fff;
  padding: 0 15px; /* 左右留白，露出边框两端 */
  font-size: 16px;
  font-style: normal;
  margin: 0;
}

3. 响应式适配 #

因为我们用了transform: translateX(-50%)实现居中，容器宽度设置为100%，标题的内边距和偏移值也可以换成em/rem单位来适配不同字体大小，所以在不同屏幕尺寸下，标题都会自动居中，边框和文本的布局也会自适应容器宽度，完全满足响应式需求。

原理说明 #

• 容器设置position: relative，让标题的绝对定位相对于容器生效
• 标题向上偏移的数值可以根据字体大小调整，刚好让边框从标题中间穿过，再用白色背景覆盖边框，形成“打断”的视觉效果
• 左右的内边距确保标题两侧的边框不会被完全覆盖，保留完整的边框感

如果需要更复杂的打断效果（比如多个位置打断），也可以用类似的思路，添加多个伪元素或者定位元素来实现，全程不需要JavaScript，纯CSS就足够啦。

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