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

我创建了一个带有不透明背景和不透明边框的 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>

我预期的结果 - 边框不透明且黑色(独立)。我如何实现这一目标？

最佳答案

您需要考虑 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>

关于css - 如何防止不透明边框继承元素的背景颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51789186/