<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>box-decoration-break</strong>.</p>
<p>Вона стилізує окремі фрагменти елементів, утворені внаслідок, наприклад, розриву сторінки.</p>
<div class="inputs">
<input id="slice" checked name="box-decoration-break" type="radio"/>
<label for="slice">slice</label>
<message for="slice">Блок буде “нарізаний” на фрагменти, які не будуть підтримувати поля, межі, тіні, заокруглення і фонові зображення.</message>
<input id="clone" name="box-decoration-break" type="radio"/>
<label for="clone">clone</label>
<message for="clone">Фрагменти підтримують всі властивості, які були задані для цілого елементу.</message>
</div>
<div class="message-box">
<p id="message">Блок буде “нарізаний” на фрагменти, які не будуть підтримувати поля, межі, тіні, заокруглення і фонові зображення.</p>
</div>
<p id="block">Це текст. <br> Просто текст для прикладу.</p>
* {
box-sizing: border-box;
padding: 0;
}
body {
font-family: sans-serif;
line-height: 1.45;
}
#block {
font-size: 1.75em;
padding: 6px 12px;
background-color: gold;
display: inline;
}
message {
display: none;
}
.message-box {
min-height: 75px;
margin-bottom: 24px;
}
var $message = $('#message');
$('.inputs').find('input').on('change', function() {
var $messageText = $("message[for='"+$(this).attr('id')+"']")
$message.text($messageText.text());
$('#block').css('box-decoration-break', $(this).attr('id'));
});
This Pen doesn't use any external CSS resources.