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

使用多个背景来实现此效果，如下所示：

<form [formGroup]="personalDetailsForm">
  <div class="form-section">
    <div class="input-containers title">
      <label>Title</label>
      <p-dropdown formControlName="titleId" [options]="titles" placeholder="Select"></p-dropdown>
    </div>
    <div class="input-containers name">
      <label>Name</label>
      <input type="text" formControlName="firstName">
    </div>
    <div class="input-containers surname">
      <label>Surname</label>
      <input type="text" formControlName="surname">
    </div>
    <div class="input-containers dropdowns nationality">
      <label>Nationality</label>
      <p-dropdown formControlName="nationalityId" [options]="nationalities" placeholder="Select"></p-dropdown>
    </div>
    <div class="input-containers dropdowns">
      <label>Identity document type</label>
      <p-dropdown formControlName="documentTypeId" [options]="idDocumentTypes" placeholder="Select"></p-dropdown>
    </div>
    <div class="input-containers">
      <label>Identity number</label>
      <input type="text" formControlName="idNumber">
    </div>
    <div class="input-containers dropdowns">
      <label>Gender</label>
      <p-dropdown formControlName="genderId" [options]="genders" placeholder="Select"></p-dropdown>
    </div>
  </div>
</form>

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;
}

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

<div class="box">

</div>

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;
}

Answer 2

也许是SVG

svg {
  display: block;
  width: 200px;
  margin: 1em auto;
}

path {
  fill: none;
  stroke: grey;
  stroke-width: 2;
  stroke-linejoin: miter;
  stroke-dasharray: 5 5;
}

<svg viewbox="0 0 100 100">
  <path d="M5,5
           L40,5 
           M60,5 
           L95,5
           L95,95
           L5,95
           L5,60
           M5,40
           L5,5
           "
        
        />
  
</svg>

实现CSS边框，在某些位置之间留有空隙

2 个答案: