如何防止不透明边框继承元素的背景色？

Question

我创建了一个具有不透明背景和不透明边框的DIV。问题是我将边框的基础颜色设置为黑色，但是它仍然从DIV继承了红色背景。

我的演示代码段：

 .elem {
    height:           30px;
    width:            50px;
    background-color: rgba(255, 30, 0, 0.5);
    border:           5px solid rgba(0, 0, 0, 0.2);
}

<div class="elem"></div>

我期望的结果-边框是不透明和黑色的（独立的）。我该如何实现？

Answer 1

您需要考虑background-clip：

.elem {
  height: 30px;
  width: 50px;
  background-color: rgba(255, 30, 0, 0.5);
  background-clip: padding-box;
  border: 5px solid rgba(0, 0, 0, 0.2);
}

<div class="elem"></div>