html - 如何使用 CSS 创建三重重叠边框？

Question

我想实现如下图所示的三重边框。

我尝试了以下解决方案，但 Angular 落看起来仍然不同。它没有重叠。

.dtborder {
  position: relative;
  border: 5px solid red;
  height: 500px;
  width: 500px;
  background: #f8f8f8;
  padding: 30px;
}

.dtborder:before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  border: 5px solid blue;
}

.dtborder:after {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 15px;
  right: 15px;
  border: 5px solid green;
}

<div class="dtborder ">This text appears inside a double bracket bordered div where you can control the gap between border lines.</div>

看这个:https://jsfiddle.net/kajh1odv/1/

Answer 1

您可以考虑linear-gradient，您可以无限缩放以拥有任意数量的边框。它可能看起来很复杂，但您会看到所有渐变都将具有相同的大小 (4px)，所以 [100% 4px] 用于水平渐变，[4px 100%] 垂直的。然后对于位置，我们每次删除/添加 8px (或任何值) 以在每个渐变之间偏移。

.dtborder {
  position: relative;
  height: 200px;
  width: 300px;
  background:
  /*First border*/
  linear-gradient(red,red) 0 100%/100%  4px, /*Bottom*/
  linear-gradient(red,red) 0 0/100%  4px ,   /*Top*/
  linear-gradient(red,red) 0 0/4px 100% ,    /*left*/
  linear-gradient(red,red) 100% 0/4px 100%,  /*right*/
  /*Second border*/
  linear-gradient(blue,blue) 0 calc(100% - 8px)/100%  4px ,
  linear-gradient(blue,blue) 0 8px/100%  4px,
  linear-gradient(blue,blue) 8px 0/4px 100%,
  linear-gradient(blue,blue) calc(100% - 8px) 0/4px 100%,
  /*third border*/
  linear-gradient(green,green) 0 calc(100% - 16px)/100%  4px,
  linear-gradient(green,green) 0 16px/100%  4px,
  linear-gradient(green,green) 16px 0/4px 100%,
  linear-gradient(green,green) calc(100% - 16px) 0/4px 100%;
  /*And so on ...*/
  background-repeat:no-repeat;
  padding: 30px;
}

<div class="dtborder ">This text appears inside a double bracket bordered div where you can control the gap between border lines.</div>

您可以像这样优化代码:

.dtborder {
  position: relative;
  height: 200px;
  width: 300px;
  background:
  /*First border*/
  linear-gradient(red,red) 0 100%,
  linear-gradient(red,red) 0 0,
  linear-gradient(red,red) 0 0,
  linear-gradient(red,red) 100% 0,
  /*Second border*/
  linear-gradient(blue,blue) 0 calc(100% - 8px),
  linear-gradient(blue,blue) 8px 0,
  linear-gradient(blue,blue) 0 8px,
  linear-gradient(blue,blue) calc(100% - 8px) 0,
  /*third border*/
  linear-gradient(green,green) 0 calc(100% - 16px),
  linear-gradient(green,green) 16px 0,
  linear-gradient(green,green) 0 16px,
  linear-gradient(green,green) calc(100% - 16px) 0;
  /*And so on ...*/
  background-size:100% 4px,4px 100%;
  background-repeat:no-repeat;
  padding: 30px;
}

<div class="dtborder ">This text appears inside a double bracket bordered div where you can control the gap between border lines.</div>

也喜欢这样:

.dtborder {
  position: relative;
  height: 200px;
  width: 300px;
  background:
  /*First border*/
  linear-gradient(red,red) left 0 bottom 0,
  linear-gradient(red,red) 0 0,
  linear-gradient(red,red) 0 0,
  linear-gradient(red,red) right 0 top 0,
  /*Second border*/
  linear-gradient(blue,blue) left 0 bottom 8px,
  linear-gradient(blue,blue) 8px 0,
  linear-gradient(blue,blue) 0 8px,
  linear-gradient(blue,blue) right 8px top 0,
  /*third border*/
  linear-gradient(green,green) left 0 bottom 16px,
  linear-gradient(green,green) 16px 0,
  linear-gradient(green,green) 0 16px,
  linear-gradient(green,green) right 16px top 0;
  /*And so on ...*/
  background-size:100% 4px,4px 100%;
  background-repeat:no-repeat;
  padding: 30px;
}

<div class="dtborder ">This text appears inside a double bracket bordered div where you can control the gap between border lines.</div>