Własność CSS box-decoration-break

> Dodaj do ulubionych

Własność CSS box-decoration-break kontroluje sposób renderowania marginesów, obramowania, dopełnienia, tle i innych elementów dekoracyjnych, gdy element zostanie podzielony na fragmenty (np. strony albo kolumny w układzie wielokolumnowym CSS).

Wartości i składnia

Własność box-decoration-break jako wartość przyjmuje jedno z następujących słów kluczowych:

clone
Każdy fragment podzielonego elementu ma własny niezależny zestaw wszystkich elementów dekoracyjnych.

Jeśli są zdefiniowane własności border-radius, border-image i box-shadow, to ich ustawienia także są niezależnie zastosowane do każdego fragmentu.

Dotyczy to także tła, a więc jeśli w tle elementu jest ustawiony obraz bez powtarzania, to w każdym jego fragmencie zostanie on wyrenderowany osobno, w efekcie czego może on wystąpić kilkukrotnie.

slice
Element wygląda tak, jakby został wyrenderowany w całości, a następnie „pocięty” na części.

W efekcie wzdłuż linii „cięcia” nie ma obramowania, dopełnienia, marginesu ani cienia elementu.

Z kolei tła, zaokrąglenia rogów i obrazy w tle obramowania są renderowane na przestrzeni elementu tak, jakby nie został on podzielony na fragmenty.

Przykład

Poniżej znajduje się przykładowy uproszczony dokument HTML zawierający element, którego treść została rozmieszczona w układzie wielokolumnowym CSS.


<!DOCTYPE html>
<html lang="pl">
<head>
  <meta  charset="utf-8">
  <title>Przykład  użycia własności box-decoration-break</title>
  <style>
    div {
      columns: 2;
      width: 450px;
    }
    p {
      border: 3px dashed red;
      padding: 20px;
      background: linear-gradient(to right top,  yellow, green);
    }
  </style>
</head>
<body>
  <div>
    <p>Miałem już  sposobność zaznaczyć, jak bardzo zyskuje dzieło Balzaca na ujęciu go z  perspektywy całości; to, iż w ostatnich czasach w Polsce genialny ten pisarz  budził tak słabe stosunkowo zainteresowanie, ma niewątpliwie przyczynę w  okoliczności, iż dawniejsze polskie wydawnictwa w osobliwy sposób pominęły  właśnie te utwory, które pozwalają skupić świat Komedii Ludzkiej w organiczną  całość.</p>
    </div>
</body>
</html>

Domyślną wartością własności box-dexoration-break jest slice, więc jeśli teraz obejrzymy ten dokument w przeglądarce, to będzie ona wyglądał tak, jak na poniższym zrzucie ekranu:

Efekt własności box-decoration-break o wartości domyślnej slice

A teraz do reguły dotyczącej elementu p dodamy deklarację własności box-dexoration-break z wartością clone:


p {
    border: 3px dashed red;
    padding: 20px;
    background: linear-gradient(to right top, yellow, green);
    box-dexoration-break: clone;
  }

W efekcie tej zmiany fragmenty akapitu będą wyglądały tak:

Efekt własności box-decoration-break o wartości domyślnej clone

Podsumowanie

ZastosowanieWszystkie elementy HTML
Obsługiwane wartościSłowa kluczowe slice i clone
Wartość początkowaslice
DziedziczenieNie
Specyfikacja CSSCSS Fragmentation Module Level 3, box-dexoration-break
Jajko z dzwonkiem

Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.