颜色边框反转

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 索引规则调整顶部的一端。

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