Код: Выделить всё
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
