如何在此处创建图片上的虚线div边框

Question

基本上，我希望将这4个框中的每一个都作为一个div，然后为每个类型的边框分别创建一个类，以创建带有这种阴影或某种东西的边框

但是除了创建边框之外，我不知道从哪里开始

Answer 1

我不确定CSS中是否可以使用文字边界属性来实现此目的，但是如果稍作改动，您可以将该div包裹在另一个使用重复渐变属性的div中，

.wrap {
  background: repeating-linear-gradient( 45deg, black, black 5px, white 5px, white 10px);
  
  border: 1px solid black;

  display: flex;
  justify-content: center;
  align-items: center;
}

.real {
  background-color: white;

  border:1px solid black;

  width: 100%;
  height: 100%;
  margin: 15px;
}

<div class="wrap">
  <div class="real">
    <p>Sup</p>
  </div>
</div>

您可以在其中更改内部div的边距以复制增加的边框大小，还可以在repeating-linear-gradient属性中弄乱值以增加显示的线条数和颜色。

Answer 2

您可以使用渐变百分比来获得所需的内容

.border-box {
    position: relative;
    width: 25rem;
    height: 20rem;
    box-sizing: border-box;
    border: 2rem solid transparent;
    border-image: repeating-linear-gradient(to right top, black 10%, white 11%) 15%;
}

 <div class="border-box"></div>