Сложные фоновые плюс ⇐ Html

[Anonymous]

Я создаю панель прогресса в стеклянном виде, изготовленном из 10 сложенных срезов < /strong>, каждый со своим собственным

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

backdrop-filter: blur()< /code>.

он идеально подходит на рабочем хром /крае, но на экранах с высоким DPR
< /strong> (Safari ios 17, Chrome Android 120) тонкие некрашенные линии
Sweeticle BLAIVE (Br /> Sweemble (Br /> Sweemble (Br /> Sweemble (Br /> < /h4>
< /p>
[h4]. Границы). < /p>
 фактическое < /h4>
Горизонтальные швы 1-px /промежутки между срезами на мобильных и таблетовых просмотрах < /p>
 Минимальный воспроизводимый пример < /h4>




.blur-container {
position: relative;
width: 280px;
height: 60px;
border-radius: 30px;
overflow: hidden;
--layers: 10;
}

.slice {
position: absolute;
inset: 0;
top: calc(var(--i)*(100%/var(--layers)));
height: calc(100%/var(--layers));
background: rgba(102, 102, 102, .25);
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
}< /code>

Что я попробовал [/h4]

Настройка высоты в vh , px и fr (grid) - Seeams. скрывает швы, но смягчает края, которые
Designer отклоняет. DPR 2–3.

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