/ Code Css background-clip | Résultat du code Css background-clip | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code de la propriété CSS background-clip.

<style>
.background-clip-border-box{  : border-box; }
.background-clip-padding-box{  : padding-box; }
.background-clip-content-box{  : content-box; } 

.exemple-background-clip{
 width:200px; height:50px; margin-bottom:10px; padding:10px; border:10px dotted #666; 
  : url(/img/style_css/background.gif); 
}
.exemple{ width:200px; height:50px; margin-bottom:10px; padding:10px; border:1px solid #666; height : auto; width : 300px; }
</style>

<div class="exemple">Image de fond utilisée :<br><img src="/img/style_css/background.gif" align="middle"></div>
<span>Exemple sans background-clip</span>
<div class="exemple-background-clip"></div> 
<span>Exemple background-clip : border-box</span>
<div class="exemple-background-clip background-clip-border-box"></div>
<span>Exemple background-clip : padding-box</span>
<div class="exemple-background-clip background-clip-padding-box"></div>
<span>Exemple background-clip : content-box</span>
<div class="exemple-background-clip background-clip-content-box"></div> 

Interprétation du code de la propriété background-clip CSS par votre navigateur.

Image de fond utilisée :
Exemple sans background-clip
Exemple background-clip : border-box
Exemple background-clip : padding-box
Exemple background-clip : content-box

Interprétation normale du code de la propriété CSS background-clip (copie d'écran).

copie d'écran de l'affichage de la propriété CSS background-clip