CSS свойство box-decoration-break

Свойство box-decoration-break определяет, как применяются background, padding, border, border-image, box-shadow, margin и clip-path элемента, когда блок фрагментирован.

Свойство box-decoration-break имеет две значения. Первое значение - "slice". Первая часть элемента отображена так, словно его блок не фрагментирован, затем отображение блока разделяется на части для каждой строки, колонки и т. д.. Второе значение - "clone". Каждый элемент отображается раздельно вместе со свойствами (border,background,padding,margin). Границы скрывают четыре края каждого фрагмента элемента, а фон полностью перерисовывается для каждого фрагмента.

Значение по умолчанию slice
Применяется Нет
Наследуется Нет
Версия CSS3
DOM синтаксис object.style.boxDecorationBreak = "clone";

Синтаксис

box-decoration-break: slice | clone | initial | inherit | unset;

Пример со значением "clone", где оформления применяются для каждого фрагмента так, словно фрагменты являются отдельными элементами:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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;
      -o-box-decoration-break: clone;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства box-decoration-break</h2>
    <p>Здесь установлено значение "clone".</p>
    <span class="box">Box<br>decoration<br>break<br>property<br>example.</span>
  </body>
</html>

Пример со значением "slice". Блок разделяется на части:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      span {
      border: 3px solid #8ebf42;
      padding:  0em 1em;
      border-radius: 12px;
      font-size: 20px;
      line-height: 2;
      background-color: #ccc;
      }
      span.ex2 { 
      -webkit-box-decoration-break: slice;
      -o-box-decoration-break: slice;
      box-decoration-break: slice;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства box-decoration-break</h2>
    <p>Здесь установлено значение "slice", которое является значением по умолчанию этого свойства.</p>
    <span class="box">Box<br>decoration<br>break<br>property<br>example.</span>
  </body>
</html>

Попробуем добавить тень к блоку, разделенному на части:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      span {
      border: 3px solid #8ebf42;
      padding:  0em 1em;
      border-radius: 12px;
      font-size: 20px;
      line-height: 2;
      background-color: #ccc;
      box-shadow: 5px 4px 10px #666;
      box-decoration-break: slice;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства box-decoration-break</h2>
    <p>Здесь установлено значение "slice", которое является значением по умолчанию этого свойства.</p>
    <span>Box<br>decoration<br>break<br>property<br>example.</span>
  </body>
</html>

Значения

Значение Описание
slice Оформления блока применяются ко всему элементу.
clone Оформления блока применяются для каждого блока отдельно.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
32.0+ 32.0+ 6.1+ 15.0
-webkit-

Практикуйте свои знания

Какие значения могут быть установлены для свойства CSS 'box-decoration-break'?
Считаете ли это полезным?