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

Question

我希望像下图一样实现三重边框。

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

.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 （或任何值）。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您可以像这样优化代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

也是这样的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在这里，我尝试找出一些像你的形象，希望这种方法可以帮助你......谢谢

.dtborder {
  position: relative;
  border: 5px solid red;
  height: 500px;
  width: 500px;
  background: #f8f8f8;
  padding: 30px;
  overflow: hidden;
}
.dtborder:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 5px;
  background: blue;
}

.dtborder:after {
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  width: 5px;
  height: 100%;
  background: blue;
}

.dtborder_two:before {
  content: "";
  position: absolute;
  top: 0;
  right: 5px;
  width: 5px;
  height: 100%;
  background: blue;
}
.dtborder_two:after {
  content: "";
  position: absolute;
  bottom: 5px;
  right: 0;
  width: 100%;
  height: 5px;
  background: blue;
}

.dtborder_three:before {
  content: "";
  position: absolute;
  top: 0;
  right: 15px;
  width: 5px;
  height: 100%;
  background: #36648b;
}
.dtborder_three:after {
  content: "";
  position: absolute;
  bottom: 15px;
  right: 0;
  width: 100%;
  height: 5px;
  background: #36648b;
}

.dtborder_four:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  height: 5px;
  background: #36648b;
}

.dtborder_four:after {
  content: "";
  position: absolute;
  top: 0;
  left: 15px;
  width: 5px;
  height: 100%;
  background: #36648b;
}

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