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
ibox-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:

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:

Podsumowanie
Zastosowanie | Wszystkie elementy HTML |
---|---|
Obsługiwane wartości | Słowa kluczowe slice i clone |
Wartość początkowa | slice |
Dziedziczenie | Nie |
Specyfikacja CSS | CSS Fragmentation Module Level 3, box-dexoration-break |