彩色边框倒置

Question

我想在内部创建2种两种颜色的边框。第一种颜色为蓝色，第二种颜色为白色。

在我的代码中，颜色是颠倒的...白色在蓝色之前...我不明白为什么？

.border-color-blue{
  height: 182px;
  width: 260px;
  background-color: blue;

}
.border-white{
  border: 1px solid #e0e0e0;
  background: white;
  width: 260px;

}

<div class="border-color-blue">
   <div class="border-white">Lorem ipsum dolor sit amet, ei cum option deserunt, sed cu dicta albucius dissentias.</div>
</div>

  

Answer 1

这都是正常的。

整个容器是蓝色的。

里面还有另一个带有白色背景的容器。

为说明起见，在opacity中添加了border-white规则。

最前沿的一个正在躲藏。

您可以使用z-index rule来调整哪一端在顶部。

.border-color-blue{
  height: 182px;
  width: 260px;
  background-color: blue;

}
.border-white{
  border: 1px solid #e0e0e0;
  background: white;
  width: 260px;
  opacity: 0.7

}

<div class="border-color-blue">
   <div class="border-white">Lorem ipsum dolor sit amet, ei cum option deserunt, sed cu dicta albucius dissentias.</div>
</div>