css – 边界上的Z-index

你不能用边框做到这一点.

有趣的是,你可以用大纲来做

* {
box-sizing: border-box;
}

.parent {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
BACkground: #bada55;
border:12px solid #663399;
outline: 12px solid red;
padding:25px
 }

.child {
width: 220px;
height: 100px;
BACkground: lightblue;
}

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

其他选择

使用伪元素

1.带边框的伪元素

需要一些额外的变换才能轻推到位.

* {
  box-sizing: border-box;
}
.parent {
  width: 200px;
  height: 200px;
  margin: 25px auto;
  position: relative;
  BACkground: #bada55;
  padding: 25px;
}
.child {
  width: 220px;
  height: 100px;
  BACkground: lightblue;
}
.absolute::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  border: 12px solid red;
}

<div class="parent absolute">
  <div class="child"></div>
</div>

2.具有盒阴影的伪元素

* {
  box-sizing: border-box;
}
.parent {
  width: 200px;
  height: 200px;
  margin: 25px auto;
  position: relative;
  BACkground: #bada55;
  padding: 25px;
}
.child {
  width: 220px;
  height: 100px;
  BACkground: lightblue;
}
.shadow::after {
  content: '';
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 12px red;
}

<div class="parent shadow">
  <div class="child"></div>
</div>