Коробка тень выглядит приглушенной, когда заголовок окрашен ⇐ CSS

[Anonymous]

У меня есть простой HTML и CSS, чтобы отобразить виджет с контейнером, заголовком и корпусом. У меня есть ящик-подвес в контейнере для виджетов, который выглядит великолепно, пока я не добавлю фоновый цвет в заголовок в виджете. Скрипкая для справки. class = "Snippet">

Код: Выделить всё

function toggleShadow() {
const widget = document.querySelector(".widget-container");
widget.classList.toggle("box-shadow");
widget.classList.toggle("filter-shadow");
}< /code>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main-container {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: space-evenly;
align-items: center;
background-color: lightyellow;
}
.widget-container {
width: 400px;
height: 400px;
background-color: #fff;;
}
.widget-header {
background-color: orange;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;
}
.box-shadow {
box-shadow: 0px 0px 10px rgb(202, 202, 202);
}
.filter-shadow {
filter: drop-shadow(0 0 5px rgba(202, 202, 202));
}
.padding-20 {
padding: 20px;
}
.border-radius-all-10 {
border-radius: 10px;
}
.border-radius-top-10 {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.border-radius-bottom-10 {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}< /code>





This is the header

This is the content of the widget.


Toggle Shadow

Подробнее здесь: https://stackoverflow.com/questions/796 ... is-colored