如何使用 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%]。然后对于位置，我们每次 remove/add 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>

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>

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

How to create a triple overlapping border with CSS?

html

css

border