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	Значение элемента наследуется от родительского элемента.