Question

你好我想在我的css双边框填充不同的颜色。我知道使用两个边框是可能的。

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

但是在这里我希望有一个带有单个Border属性的解决方案（单<div>或任何其他元素）。所以我使用了css double Property.Is有任何可能的方法来填充这个double_border的颜色？

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

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

请注意： - 有人标记这可能是重复的另一个。请在Tagg之前阅读这两个问题。这个问题是不同的，在那个问题上他要求的颜色两个不同颜色的边框。但在这里我想保留两个相同颜色的边框，我只是想填充一些颜色他们。你会理解这个问题。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用伪元素来完成此任务：

https://jsfiddle.net/82zn96Lu/

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: