如何实现带角部方块的边框效果并打断其中一条外边框？

嘿，你的实现思路没问题，但确实可以用更简洁的CSS方案来减少DOM元素，同时轻松实现边框打断的效果！下面我给你两种优化思路，先从最精简的方案说起：

方案一：纯CSS背景渐变（零额外DOM元素） #

我们可以利用CSS多背景渐变，同时绘制四个角块和带缺口的边框，完全不需要额外的<div>标签。这样DOM结构只保留最基础的.wrapper和.inner：

:root { 
  --size: 8px;    /* 角块的大小 */
  --r: -3px;      /* 角块偏移量 */
  --gap-width: 40px; /* 边框缺口的宽度 */
}

.wrapper {
  position: relative;
  margin: 25px auto;
  padding: 2px;
  width: max-content;
  /* 用多背景同时绘制角块和带缺口的边框 */
  background: 
    /* 四个角部方块 */
    linear-gradient(black, black) var(--r) var(--r)/var(--size) var(--size),
    linear-gradient(black, black) calc(100% - var(--r)) var(--r)/var(--size) var(--size),
    linear-gradient(black, black) var(--r) calc(100% - var(--r))/var(--size) var(--size),
    linear-gradient(black, black) calc(100% - var(--r)) calc(100% - var(--r))/var(--size) var(--size),
    /* 带缺口的顶部边框（分成左右两段） */
    linear-gradient(black, black) 0 var(--r)/calc(50% - var(--gap-width)/2) 1px,
    linear-gradient(black, black) calc(50% + var(--gap-width)/2) var(--r)/calc(50% - var(--gap-width)/2) 1px,
    /* 完整的右边框 */
    linear-gradient(black, black) calc(100% - var(--r)) var(--r)/1px calc(100% - 2*var(--r)),
    /* 完整的底部边框 */
    linear-gradient(black, black) var(--r) calc(100% - var(--r))/calc(100% - 2*var(--r)) 1px,
    /* 完整的左边框 */
    linear-gradient(black, black) var(--r) var(--r)/1px calc(100% - 2*var(--r));
  background-repeat: no-repeat;
}

.inner {
  padding: 15px 25px;
  border: 1px solid black;
}

<div class="wrapper">
  <div class="inner">qwerty</div>
</div>

方案说明： #

• 角块实现：通过四个linear-gradient绘制小方块，用var(--r)控制偏移量，让角块超出容器边缘，和你原来的效果一致。
• 边框打断：把顶部边框拆成左右两段，通过calc(50% ± var(--gap-width)/2)计算两段的起始和宽度，中间自然留出缺口。你可以修改--gap-width变量来调整缺口大小，也可以把缺口移到其他边框（比如底部/左侧），只需要调整对应的渐变位置即可。

方案二：伪元素+边框覆盖（兼容旧浏览器） #

如果需要兼容不支持多背景渐变的旧浏览器，可以用伪元素来实现边框打断，同时用两个伪元素绘制四个角块（利用box-shadow）：

:root { 
  --size: 8px;
  --r: -3px;
  --gap-width: 40px;
}

.wrapper {
  position: relative;
  margin: 25px auto;
  padding: 2px;
  width: max-content;
  border: 1px solid black;
  /* 隐藏顶部边框，后面用伪元素补两段 */
  border-top-color: transparent;
}

/* 用伪元素绘制带缺口的顶部边框 */
.wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: 
    linear-gradient(black, black) 0 0/calc(50% - var(--gap-width)/2) 100%,
    linear-gradient(black, black) calc(50% + var(--gap-width)/2) 0/calc(50% - var(--gap-width)/2) 100%;
  background-repeat: no-repeat;
}

/* 用伪元素绘制四个角块（box-shadow实现多个方块） */
.wrapper::after {
  content: "";
  position: absolute;
  width: var(--size);
  height: var(--size);
  background: black;
  top: var(--r);
  left: var(--r);
  box-shadow: 
    calc(100% - 2*var(--r)) 0 black,
    0 calc(100% - 2*var(--r)) black,
    calc(100% - 2*var(--r)) calc(100% - 2*var(--r)) black;
}

.inner {
  padding: 15px 25px;
  border: 1px solid black;
}

这个方案用了两个伪元素：::before补全带缺口的顶部边框，::after配合box-shadow一次性绘制四个角块，同样不需要额外的DOM元素。

调整缺口位置的小技巧： #

如果想把缺口放在底部，只需要把.wrapper的border-top-color改成border-bottom-color，然后修改::before的定位为bottom:0即可；同理可修改左右边框的缺口。

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