如何实现DIV左右两侧均带有残缺效果的CSS边框

你可以直接修改原有代码的边框规则和伪元素逻辑，不需要新增DOM节点，调整后的代码如下：

完整CSS代码 #

.incomplete-box {
  border: solid 1px #f00;
  /* 同时移除左右两侧边框 */
  border-left: none;
  border-right: none;
  width: 100px;
  height: auto;
  position: relative;
  padding: 10px 8px;
}

.incomplete-box::after,
.incomplete-box::before {
  content: '';
  position: absolute;
  /* 伪元素高度和容器一致 */
  height: 100%;
  width: 1px;
  top: 0;
  /* 渐变实现上下30%显示边框色，中间透明 */
  background: linear-gradient(to bottom, #f00 30%, transparent 30%, transparent 70%, #f00 70%);
}

.incomplete-box::before {
  left: 0;
}

.incomplete-box::after {
  right: 0;
}

HTML代码不需要修改 #

<div class="incomplete-box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore in quae incidunt deleniti minima quibusdam, suscipit dignissimos cumque officia ullam.
</div>

调整说明 #

• 原有代码仅移除了右侧边框，修改后同时移除左右两侧边框，仅保留上下完整边框
• 两个伪元素分别定位到容器左右两侧，宽度为1px模拟边框粗细
• 通过线性渐变控制伪元素的显示区域，仅上下各30%显示红色，中间区域透明，刚好实现左右双侧的中间留白残缺效果

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