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

Exemple de code de la propriété CSS border-image-source.

<style type="text/css">
.table.border-image,
.table.border-image td,
.default.border-image{
   : url(/img/screenshot_css/bordure-image.png); 
   : 30; 
   : 20px; 
   : round; 
   : 0; 
  padding : 20px; 
} 
.border-image.border-image-source-2{
   : linear-gradient( to bottom, green 0%,red 100% ); 
}
.border-image.border-image-source-3{
   : radial-gradient( ellipse at center, green 0%,red 100% ); 
}
img.border-image{ vertical-align : middle }
/* mise en page */
.table { border : 10px solid red; margin : 10px auto; }
.table td,.default {
  height : 50px; 
  border : 10px solid red; 
  margin : 15px; 
}
.collapse{  : collapse}
.zonecompare{
  position : relative; 
  height : 90px; 
  padding : 20px; 
  border : 1px solid grey; 
  margin : 15px; 
}
.zonecompare .default{
  z-index : 1; position : absolute; 
  width : 40%; 
}
.zonecompare .border-image{ z-index : 2 }
.taille{ width : 80%; margin : auto; }
</style>
<div class="taille">
  <div class="default border-image"> border-image-source </div> 
  <div class="default border-image border-image-source-2">border-image-source : linear-gradient( to bottom, green 0%,red 100% ); </div> 
  <div class="default border-image border-image-source-3">border-image-source : radial-gradient( ellipse at center, green 0%,red 100% ); </div> 
    <div class="default">border-image-outset : 0</div> 
    <div class="default border-image">border-image-outset : 0</div>
  </div>
<div class="taille"><input type="text" value="input type=text" class="default border-image"><button type="button" class="default border-image">Mon bouton</button> <img class="default border-image" src="/img/exemple/filter-image.jpg"> </div>
  <table class="table border-image">
    <tr><td>sans collapse</td><td>sans collapse</td></tr>
    <tr><td>sans collapse</td><td>sans collapse</td></tr>
  </table>
  <table class="table border-image collapse">
    <tr><td>avec collapse</td><td>avec collapse</td></tr>
    <tr><td>avec collapse</td><td>avec collapse</td></tr>
  </table>
</div>

Interprétation du code de la propriété border-image-source CSS par votre navigateur.

border-image-source
border-image-source : linear-gradient( to bottom, green 0%,red 100% );
border-image-source : radial-gradient( ellipse at center, green 0%,red 100% );
border-image-outset : 0
border-image-outset : 0
sans collapsesans collapse
sans collapsesans collapse
avec collapseavec collapse
avec collapseavec collapse

Interprétation normale du code de la propriété CSS border-image-source (copie d'écran).

copie d'écran de l'affichage de la propriété CSS border-image-source