Bordure avec dégradé en css
Avec un gradient dans border-image
Une bordure, ou cadre, avec dégradé put s'obtenir en combinant les propriétés border-width, qui permet de définir l'épaisseur de la bordure sur chacun des quatre côtés, et border-image qui accepte entre autre un gradient de couleurs.
Le css:
.withborder {
display:inline-block;padding:.5em;margin:1em;
border:solid;
border-width:0 0 .5em .5em;
border-image:linear-gradient(to bottom,rgba(0,0,255,0),rgba(0,0,255,.5),rgba(255,0,0,.5)) 10;
}
<div class="withborder">
Du texte, ou autre,
<br>
avec bordure dégradée,
<br>
et sur seulement deux bords
</div>
Du texte, ou autre,
avec bordure dégradée,
et sur seulement deux bords
avec bordure dégradée,
et sur seulement deux bords
Cette méthode ne supporte par contre pas l'ajout d'un
border-radius.
On peut, si on y tient vraiment, faire un semblant de cadre artisanalement, en supperposant en fait deux blocs.
Bordure(s) en superposant deux blocs
Comme alternative, on peut superposer deux blocs: un bloc contenant le texte avec un fond blanc (ou autre bien sûr), et un bloc en fond, contient juste unbackground dégradé avec un linear-gradient (ou autre bien sûr).
L'épaisseur de la bordure, et/ou son positionnement droite/gauche/haut/bas s'ajuste alors simplement via le
padding affecté au bloc extérieur. On peut alors aussi utiliser ici un border-radius.
Par exemple, pour le css:
.out{
display:inline-block;
background:linear-gradient(to right bottom, blue, red,white);
border-radius:0 0 0 1em;
padding-left:.5em;
padding-bottom:.5em
}
.in{
padding:.2em;
background:white;
border-radius:0 0 0 .5em
}
<div class="out">
<div class="in">
Du texte dans un bloc,
<br>
à l'intérieur d'un autre,
<br>
donnant un effet de bordure
</div>
</div>
Pour obtenir l'affichage:
Du texte dans un bloc,
à l'intérieur d'un autre,
donnant un effet de bordure
à l'intérieur d'un autre,
donnant un effet de bordure