Wartość slice jest domyślną wartością właściwości box-decoration-break.
Domyślnie, gdy obszar elementu HTML musi zostać przełamany na kilka części, wtedy dekoracja elementu HTML nie jest klonowana w identyczny sposób do każdej kolejnej części wspomnianego obszaru.
box-decoration-break:slice;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "span" wyłącznie w celach prezentacyjnych
Obszar przykładowego elementu "span" został przełamany na kilka części, lecz dekoracja przykładowego elementu "span" nie została w identyczny sposób sklonowana do każdej kolejnej części wspomnianego obszaru przykładowego elementu "span".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
margin:1em;
border:3px solid black;
border-radius:12px;
padding:1em;
background-color:#7DCDE8;
background-image:url(https://webkod.pl/files/css/obrazek-01.png);
background-repeat:no-repeat;
box-shadow:0 4px 4px red;
font-size:1.3em;
line-height:4em;
}
</style>
</head>
<body>
<span>
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "span" wyłącznie w celach prezentacyjnych
</span>
</body>
</html>
Za pomocą wartości clone właściwości box-decoration-break możemy sprawić, że gdy obszar interesującego nas elementu HTML musi zostać przełamany na kilka części, wtedy dekoracja tego elementu HTML zostanie sklonowana w identyczny sposób do każdej kolejnej części wspomnianego obszaru.
box-decoration-break:clone;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "span" wyłącznie w celach prezentacyjnych
Obszar przykładowego elementu "span" został przełamany na kilka części, ponadto dekoracja przykładowego elementu "span" została w identyczny sposób sklonowana do każdej kolejnej części wspomnianego obszaru przykładowego elementu "span", ponieważ do wspomnianego elementu "span" została dodana właściwość "box-decoration-break" wraz z wartością "clone".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
margin:1em;
border:3px solid black;
border-radius:12px;
padding:1em;
background-color:#7DCDE8;
background-image:url(https://webkod.pl/files/css/obrazek-01.png);
background-repeat:no-repeat;
box-shadow:0 4px 4px red;
font-size:1.3em;
line-height:4em;
}
</style>
</head>
<body>
<span>
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "span" wyłącznie w celach prezentacyjnych
</span>
</body>
</html>
