CSS-свойство box-decoration-break
box-decoration-break — CSS-свойство для оформления фрагментированных блоков. Узнайте подробнее и посмотрите примеры.
CSS-свойство box-decoration-break определяет, как background, padding, border, border-image, box-shadow, margin и clip-path элемента применяются, когда блок фрагментирован — то есть разбит на несколько строк, столбцов или страниц.
На этой странице объясняется, что такое фрагментация, чем отличаются два значения (slice и clone), в каких случаях применяется это свойство и как им пользоваться — с рабочими примерами.
Что такое фрагментированный блок?
Блок считается фрагментированным, если его нельзя отобразить как один непрерывный прямоугольник. Наиболее распространённый случай — строчный элемент, например <span>, текст которого переносится на несколько строк, однако фрагментация также возникает при разрывах столбцов (в многоколоночных макетах) и при разрывах страниц при печати.
По умолчанию браузеры рассматривают весь элемент как единый блок и разрезают его только на границах строк. Это означает, что оформление — например, рамка или border-radius — рисуется один раз для всего элемента, а затем обрезается: скруглённые углы и правая/левая граница появляются лишь в самом начале и в самом конце фрагмента, а не на каждой строке. box-decoration-break позволяет изменить это поведение.
Свойство box-decoration-break имеет два основных значения:
slice(значение по умолчанию) — применяет оформление ко всему элементу, как если бы он не был фрагментирован, а затем «нарезает» блок на границах каждого фрагмента. Углы, рамки и фоны «обрезаются» в местах переноса строки.clone— применяет каждое оформление к каждому фрагменту независимо. Рамки охватывают все четыре стороны каждого фрагмента, border-radius повторяется на каждом фрагменте, а фон полностью перерисовывается для каждого из них.
Простой способ запомнить: slice — один блок, разрезанный на части; clone — каждая часть является самостоятельным полным блоком.
Когда использовать
Используйте box-decoration-break: clone, когда хотите, чтобы оформленный строчный элемент выглядел одинаково на каждой строке. Типичные сценарии:
- Выделенный / «маркерный» текст — каждая перенесённая строка должна сохранять скруглённые углы и padding.
- Стили «таблетки» или значка, применяемые к строчным ссылкам или тегам, которые могут переноситься.
- Многоколоночные или печатные макеты, в которых элемент с рамкой пересекает разрыв столбца или страницы, и нужна полная рамка на каждом фрагменте, а не незакрытая.
| Начальное значение | slice |
|---|---|
| Применяется к | Всем элементам (и, концептуально, к каждому фрагменту блока). |
| Наследуется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.boxDecorationBreak = "clone"; |
Синтаксис
Синтаксис CSS-свойства box-decoration-break
box-decoration-break: slice | clone | initial | inherit | unset;Вот пример со значением clone, при котором оформление применяется к каждому фрагменту так, словно фрагменты являются отдельными элементами.
Пример CSS-свойства box-decoration-break со значением clone
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #1c87c9;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
}
span.box {
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>Here the box-decoration-break is set to "clone".</p>
<span class="box">Box<br />decoration<br />break<br />property<br />example.</span>
</body>
</html>Результат
Современные браузеры поддерживают это свойство без префиксов, однако в примерах включён префикс -webkit- для совместимости со старыми версиями браузеров.
Рассмотрим ещё один пример, в котором к блоку применяется значение slice. Здесь блок нарезается на части.
Пример CSS-свойства box-decoration-break со значением slice
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #8ebf42;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
background-color: #ccc;
}
span.box {
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>
Here the box-decoration-break is set to "slice" which is the default value of this property.
</p>
<span class="box">Box<br />decoration<br />break<br />property<br />example.</span>
</body>
</html>Результат
Теперь посмотрим, как тень блока применяется к «нарезанному» блоку.
Пример CSS-свойства box-decoration-break со значением slice и тенью
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #8ebf42;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
background-color: #cccccc;
box-shadow: 5px 4px 10px #666666;
box-decoration-break: slice;
-webkit-box-decoration-break: slice;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>
Here the box-decoration-break is set to "slice" which is the default value of this property.
</p>
<span>Box<br />decoration<br />break<br />property<br />example.</span>
</body>
</html>Результат
Значения
| Значение | Описание |
|---|---|
| slice | Оформление блока применяется ко всему элементу и обрезается на границах фрагментов. |
| clone | Оформление блока применяется к каждому фрагменту отдельно. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
| unset | Действует как inherit, если свойство наследуется, иначе — как initial. |
Поддержка браузерами и префиксы
box-decoration-break поддерживается во всех современных браузерах. Firefox поддерживает свойство без префикса; Chrome, Edge, Safari и другие браузеры на базе WebKit/Blink исторически требовали префикс -webkit-box-decoration-break, поэтому рекомендуется объявлять оба варианта:
-webkit-box-decoration-break: clone;
box-decoration-break: clone;Всегда размещайте свойство с префиксом перед стандартным, чтобы объявление без префикса имело приоритет там, где оно поддерживается.
Связанные свойства
- box-shadow — добавляет тени, которые это свойство может клонировать для каждого фрагмента.
- border-radius — скруглённые углы, которые
cloneповторяет на каждой строке. - CSS columns — многоколоночные макеты, в которых возникает фрагментация.
- padding и margin — отступы, на которые влияет фрагментация.