三重边框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

你可以无限扩展一些线性渐变,以获得任意数量的边框.它可能看起来很复杂,但你会看到所有的渐变都有相同的尺寸4px,所以linear-gradient对于水平和4px垂直的.然后,对于我们每次移除/添加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>

UPDATE

您可以像这样优化代码:

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