如何定位：在具有z-index + position相对设置的父元素之前的伪元素？

Question

我正在尝试使用伪元素创建双色边框。但是如果我将z-index添加到父“.d”，它就会停止工作。有没有办法在“.d”上设置“position：relative”和“z-index”并使其有效？

.d {
  background-color: #000;
  height: 100px;
  width: 100px;
  /*z-index: 1000;  */
  /* Stops working if I add z-index */
  position: relative;
}
.d:before {
  content: "";
  border: #0000ff 4px dashed;
  background-color: #ff0000;
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
  position: absolute;
  z-index: -1;
}

<div class="d"></div>

https://jsfiddle.net/vmwm0zfg/

Answer 1

您可以使用两个伪元素，一个带有实线边框，另一个带有虚线。实线边框位于虚线边框下方，无需消极z-index。

可以在父级上使用

overflow: hidden来剪切边框宽度，同时保持笔画长度。

＆＃13;

＆＃13;

.d {
  background-color: #000;
  height: 100px;
  width: 100px;
  position: relative;
  z-index: 100;
  /*Hidden is to cut off the excess border*/
  overflow: hidden;
}
.d:before,
.d:after {
  content: "";
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
  position: absolute;
}
.d:before {
  border: #F00 4px solid;
}
.d:after {
  border: #00a3ff 4px dashed;
}

＆＃13;

<div class="d"></div>

＆＃13;

＆＃13;

＆＃13;