html - 实现在某些点之间有间隙的 CSS 边框

Question

我希望能够使用类似于我包含的代码片段的东西。我的问题是，如果不使用透明度，我实际上无法掩盖边界之间的间隙……这是一个问题，因为我希望这个框覆盖图像。当然有一些更好的方法。有人有什么想法吗？

理想情况下，有一些方法可以在不使用透明度的情况下实际忽略边框中的那些部分，这样它们就根本不存在了。我已经挖掘了几个小时，似乎找不到解决方案。有人有什么想法吗？

div {
	background: transparent;
  color: transparent;
	padding: 2rem;
	position: relative;
	width: 200px;
	height: 200px;
	margin: 3em auto;
	border: dashed 2px #BEBEBE;
}

div::before,
div::after {
	position: absolute;
	background: white;
	content: '';
	z-index: 1;
}

div::before {
	width: 70px;
	left: calc(50% - 35px);
	height: calc(100%);
	top: -2px;
}

div::after {
	height: 35px;
	left: -2px;
	width: calc(100%);
	top: calc(50% - 15px);
}

div>* {
	position: relative;
	z-index: 2;
}

<div>

</div>

Answer 1

使用多个背景来实现如下:

div.box {
  padding: 2rem;
  position: relative;
  width: 200px;
  height: 200px;
  margin: 3em auto;
  
  background:
  /* Top (two lines)*/
    repeating-linear-gradient(90deg, #BEBEBE 0 4px,transparent 4px 8px) top left/40% 2px,
    repeating-linear-gradient(90deg, #BEBEBE 0 4px,transparent 4px 8px) top right/40% 2px,
  /* Left (two lines)*/
    repeating-linear-gradient(0deg, #BEBEBE 0 4px,transparent 4px 8px) top left/2px 40%,
    repeating-linear-gradient(0deg, #BEBEBE 0 4px,transparent 4px 8px) bottom left/2px 40%,
    /* Bottom */
    repeating-linear-gradient(90deg,#BEBEBE 0 4px,transparent 4px 8px) bottom/100% 2px,
    /*Right*/
    repeating-linear-gradient(0deg,#BEBEBE 0 4px,transparent 4px 8px) right/2px 100%;
  background-repeat:no-repeat;
}

<div class="box">

</div>

您可以使用 CSS 变量进行优化:

div.box {
  --c:#BEBEBE; /* Color */
  --t:2px;     /* Thickness*/
  --d:4px;     /* length of dashes */
  --h:50px;    /* size of the hole*/

  padding: 2rem;
  position: relative;
  width: 150px;
  height: 150px;
  display:inline-block;
  margin: 1em;
  --g:var(--c) 0 var(--d),transparent var(--d) calc(2*var(--d));
  background:
    /* Top (two lines)*/
    repeating-linear-gradient(90deg ,var(--g)) top left /calc(50% - var(--h)/2) var(--t),
    repeating-linear-gradient(-90deg,var(--g)) top right/calc(50% - var(--h)/2) var(--t),
    /* Left (two lines)*/
    repeating-linear-gradient(180deg,var(--g)) top    left/var(--t) calc(50% - var(--h)/2),
    repeating-linear-gradient(0deg  ,var(--g)) bottom left/var(--t) calc(50% - var(--h)/2),
    /* Bottom */
    repeating-linear-gradient(90deg,var(--g)) bottom/100% var(--t),
    /*Right*/
    repeating-linear-gradient(0deg ,var(--g)) right /var(--t) 100%;
  background-repeat:no-repeat;
}

<div class="box">

</div>

<div class="box" style="--c:red;--t:4px;--h:90px;--d:8px;">

</div>