Как предотвратить наследование цвета фона элемента непрозрачной рамкой?

Я создал 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>

Результат, которого я ожидал - граница непрозрачная и черная (независимая). Как мне этого добиться?

3
0
46
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Другие вопросы по теме