如何在此处的图像上创建虚线 div 边框 [重复]答案

【问题标题】：How to create dashed div borders like on the image here [duplicate]如何在此处的图像上创建虚线 div 边框 [重复]
【发布时间】：2019-06-15 19:10:17
【问题描述】：

基本上，我希望这 4 个盒子中的每一个都是一个 div，然后最好为每种类型的边框创建一个类，以创建带有那种阴影或其他东西的边框

但我不知道从哪里开始，除了创建一个边框

【问题讨论】：

您的“设计”中的边框不一致。出于好奇，谁让你做的？
@RokoC.Buljan 有时客户会产生不一致的规格

标签： html css

【解决方案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 属性中的值来增加显示的线条数量及其颜色。

【讨论】：

效果很好，谢谢

【解决方案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%;
}

 &lt;div class="border-box"&gt;&lt;/div&gt;

【讨论】：

最好使用与边框相同的切片值以获得良好的结果..在您的情况下 2rem = 2*16 = 30 : jsfiddle.net/vg0n15cm