border-image-source CSS exemple de code | ZONE CSS Exemple d'écriture de la propriété CSS border-image-source, code CSS détaillé avec toutes les valeurs de la CSS border-image-source. Copie d'écran de l'interprétation de la propriété border-image-source CSS pour comparer avec l'interprétation CSS votre navigateur. Définition de la propriété CSS border-image-source. 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{
border-image-source : url(/img/screenshot_css/bordure-image.png);
border-image-slice : 30;
border-image-width : 20px;
border-image-repeat : round;
border-image-outset : 0;
padding : 20px;
}
.border-image.border-image-source-2{
border-image-source : linear-gradient( to bottom, green 0%,red 100% );
}
.border-image.border-image-source-3{
border-image-source : 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{ border-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> Agrandir la zone de code HTML
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 collapse sans collapse
sans collapse sans collapse
avec collapse avec collapse
avec collapse avec collapse
Interprétation normale du code de la propriété CSS border-image-source (copie d'écran).
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.