Свойство CSS box-decoration-break
Свойство box-decoration-break в CSS определяет, как фон, отступы, граница, border-image, тень блока, внешний отступ и clip-path элемента применяются, когда блок разбивается на фрагменты.
Свойство box-decoration-break имеет два значения. Значение slice применяет декорации ко всему элементу так, как будто он не разбит на фрагменты, а затем разрезает блок по краям каждого фрагмента. Значение clone применяет каждую декорацию к каждому фрагменту независимо. Границы обрамляют четыре стороны каждого фрагмента, а фон полностью перерисовывается для каждого фрагмента. Обратите внимание, что разбивка может происходить не только из-за переносов строк, но и из-за разрывов страниц или колонок.
| Начальное значение | slice |
|---|---|
| Применяется к | Блочным элементам, flex-контейнерам и grid-контейнерам. |
| Наследуется | Нет. |
| Версия | 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 | Наследует свойство от родительского элемента. |
Практика
Что делает свойство CSS box-decoration-break?