Многострочный заголовок с градиентным фоном и border-radius часто выглядит как бракованный: на второй строке скругления исчезают, фон обрывается. Это не баг браузера, а дефолтное поведение box-decoration-break: slice. В production — лендинги, блоги, админки — такая ошибка ломает визуальную цельность компонента.
Как работает box-decoration-break: clone
По умолчанию браузер режет декорации inline-элемента по границам строк. Свойство
box-decoration-break: clone заставляет каждую строку отрисовывать padding, background, border-radius и box-shadow как независимый фрагмент. Для Safari нужен префикс -webkit-box-decoration-break: clone. Пример:.heading {
display: inline;
background: linear-gradient(to right, #ff7e5f, #feb47b);
padding: 0.2em 0.5em;
border-radius: 8px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}Без clone на второй строке фон плоский, паддинги не срабатывают. С clone каждая строка получает полный набор декораций.
Где это критично в production
Динамические заголовки статей — длина строки плавает, ошибка проявляется непредсказуемо. Градиентные фоны со скруглениями на inline-элементах в UI-библиотеках. Списки с рамкой на каждом пункте-строке. Инлайн-элементы с box-shadow — без clone тень обрезается по краю строки. Поддержка: Chrome, Firefox, Safari, Edge — с префиксом для Safari. IE — нет.
Типичная ошибка и совет
Ошибка: применять к блочным элементам — эффекта ноль, работает только на
display: inline или inline-block. Совет: скрести с background-clip: text — тогда каждая строка текстовой маски получит свой фон, что даёт неожиданно чистый визуальный результат для заголовков с прозрачным текстом. Trade-off: увеличивается сложность отладки визуальной регрессии, особенно для адаптивных сеток с переполнением строки.Вывод: box-decoration-break: clone — обязательное свойство для консистентных inline-декораций в production, предотвращающее визуальные артефакты на многострочных заголовках.
