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

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>

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

How to prevent opaque border inherit element's background color?

css

border