css 双边框之间是否有填充颜色的可能方法？

Question

大家好，我想在我的 css Double Border.I 中填充不同的颜色 Border.I 知道可以使用两个边框。

#parent{
  width:100px;
  height:100px;
  border:1px solid #000;
  display:flex;
  align-items:center;
  justify-content : center;
  background-color:red;
}
#child{
  width:80px;
  height:80px;
  border:1px solid #000;
  background-color:#fff;
}

<div id="parent">
   <div id="child"></div>
</div>

但在这里我想有一个解决方案只有一个边框属性（单个 <div> 或任何其他元素）。所以我在那里使用了 css double Property.Is有什么可能的方法来填充这个 double_border?

#element{
  width:100px;
  height:100px;
  border:10px double #000;
}

<div id="element"></div>

Please Note :- Somebody Tagged That This is Possible Duplicate of Another.Just Please Read Both of the Question before You Tagg. This question is different,on that question he is asking for color the the two borders with different color.but here I would like to keep two borders with same color,I just wanna to fill some color between them.hope you will understand the problem.

Answer 1

您可以使用 border、box-shadow 和 outline 属性。

#element {
  width: 100px;
  height: 100px;
  border: 3px solid black; /* inner border */
  box-shadow: 0px 0px 0px 15px black; /* outer 'border' */
  outline: 12px solid green; /* fill */
  margin-left: 30px;
  margin-top: 30px;
}

<div id="element"></div>

Answer 2

您可以使用伪元素来完成此操作：

https://jsfiddle.net/82zn96Lu/

#doubleBorder {
  text-align: center;
  position: relative;
  z-index: 10;
  padding: 100px;
  background: #fff;
  border: 6px solid red;
}

#doubleBorder:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border: 6px solid blue;
}

<div id="doubleBorder">
  a double border
</div>

Answer 3

您还可以使用多个框阴影：

#element {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #f00, 0 0 0 9px #000;
}

<div id="element"></div>

css 双边框之间是否有填充颜色的可能方法？

Is there is a possible way to fill color between css double border?

html

css

border