Tutoriel sur boostrap pour créer vos pages web responsives qui s'adaptent automatiquement avec les différentes largeurs des écrans (PC, mobile et tablette)
Définition et utilisation da la propriété css box-decoration-break
La propriété box-decoration-break spécifie la façon dont l'arrière-plan, le padding, la bordure, l'image de la bordure, le box-shadow, la marge et le clip-path d'un élément sont appliqués lorsque la boîte de l'élément est fragmentée.La Syntaxe CSS
box-decoration-break: slice|clone|initial|inherit|unset;
| Valeurs par défaut | slice |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
Prise en charge de la propriété css dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 22 -webkit- | 79 | 32 | 6.1 -webkit- | 11.5 -webkit- |
Valeurs de la propriété css box-decoration-break
slice : Par défaut. Les décorations de boîtes sont appliquées à l'élément dans son ensemble et se brisent sur les bords des fragments de l'élément.clone : Les décorations de boîtes s'appliquent à chaque fragment de l'élément comme si les fragments étaient des éléments individuels. Les bordures enveloppent les quatre bords de chaque fragment de l'élément et les arrière-plans sont redessinés dans leur intégralité pour chaque fragment.
initial : Définit cette propriété à sa valeur par défaut.
inherit : Hérite de cette propriété de son élément parent.
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Css propriété box-decoration-break </title>
<style>
body {
text-align:center;
width:80%;
}
span {
border: 2px solid #003668;
padding: 5px;
border-radius: 6px;
font-size: 24px;
line-height: 3;
}
span.oujood{
-webkit-box-decoration-break: slice;
-o-box-decoration-break: slice;
box-decoration-break: slice;
}
.ojd {
font-size: 40px;
color: #003668;
font-weight: bold;
}
</style>
</head>
<body>
<div class = "ojd">oujood.com pour apprendre </div>
<div class = "oujood">
Un portail informatique pour apprendre
</div>
<h2>box-decoration-break: slice;</h2>
<span class="oujood">
Vel fringilla est ullamcorper eget. Mollis nunc sed id semper. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Egestas diam in arcu cursus euismod quis viverra nibh cras. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Ultrices vitae auctor eu augue ut lectus arcu bibendum at. Enim neque volutpat ac tincidunt vitae semper quis lectus. Nullam non nisi est sit amet facilisis. Ullamcorper a lacus vestibulum sed arcu. Integer quis auctor elit sed vulputate mi sit amet. Suspendisse faucibus interdum posuere lorem ipsum dolor. Sit amet est placerat in egestas. Ut ornare lectus sit amet. Tortor aliquam nulla facilisi cras fermentum odio. Augue mauris augue neque gravida in fermentum et sollicitudin ac. Facilisis sed odio morbi quis commodo odio. Enim sit amet venenatis urna cursus eget nunc. Nisi vitae suscipit tellus mauris a diam maecenas sed enim. Pulvinar elementum integer enim neque. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci.
</span>
</body>
</html>