/ 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>
Voir de code border-image-source dans :

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


Aller en haut de la page

Vos paramètres de cookies

Ce site utilise des cookies pour améliorer votre expérience utilisateur et optimiser le fonctionnement du site.
Des contenus publicitaires vous sont aussi présentés, ainsi que cookies de partages sur les réseaux sociaux.

Vous pouvez accepter ces cookies en cliquant sur « Autoriser tous les cookies », cliquer sur « Paramétrer les cookies » pour gérer vos préférences de cookies.