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

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>