web-dev-qa-db-fra.com

Est-il possible de créer une bordure dégradée avec css3?

Comme le titre l'indique, est-il possible de créer une bordure de dégradé en CSS3 et si oui, comment? Je sais que vous pouvez créer des arrière-plans dégradés et qu'il existe de nombreux générateurs pour cela, mais je n'ai pas encore trouvé celui qui crée le code pour une bordure de dégradé.

csscss3bordergeneratorgradient
12
Vasseurth

1.

Eh bien .. ce n’est pas une fantaisie CSS3 mais voici une solution possible:

J'ai fait cet exemple pour autre chose avant et je viens de changer l'URL de fond de #childWrap

http://jsfiddle.net/qD4zd/1/ (notez que le dégradé n’est pas très souple comme il est fait avec des images.)

L'idée de base est que si vous avez un élément que vous souhaitez encadrer avec une bordure avec un dégradé, un motif ou simplement une image, vous devez envelopper cet élément dans un autre que vous utiliserez comme bordure.

2.

Dégradé un peu plus souple: vous pouvez également essayer http://www.css3pie.com et utiliser le fond dégradé de l’élément externe pour créer une bordure comme dans mon exemple jsfiddle.

OR

http://www.colorzilla.com/gradient-editor/

( http://jsfiddle.net/qD4zd/2/ )

3.

Sur une troisième note .. La première méthode pourrait être transformée en une méthode plus flexible en utilisant la balise <img> afin de forcer l'image à une hauteur et une largeur spécifiques .. pourrait même sembler décent.

7
Joonas

Voici une possibilité de créer une bordure d’ombre dégradée avec CSS3: 

-webkit-border-radius: 10px;
   -moz-border-radius: 10px;
    -ms-border-radius: 10px;
        border-radius: 10px;

border: 4px solid rgba(0,0,0,.5);
-webkit-box-shadow: inset 0 0 20px #000;
   -moz-box-shadow: inset 0 0 20px #000;
    -ms-box-shadow: inset 0 0 20px #000;
        box-shadow: inset 0 0 20px #000;

En pratique, cela créera une bordure d'ombre intérieure avec un rayon de 10px sur les bords.

7
Simo Endre

Rien à faire, il suffit d'ajouter le code suivant:

 border-image: linear-gradient(to bottom, black 0%, white 100%);
  /* border-image-slice: 1;*/

il suffit d’ajouter du code ci-dessus à l’élément et la propriété border-image-slice définira les décalages internes de l’élément.

2
Suren Neware

Bordure avec dégradé linéaire.

HTML

<div id="input_parameters">
        ...Some HTML...
</div>

CSS

#input_parameters {
border: 10px solid transparent;

border-image: linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);

-webkit-border-image: -webkit-linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);

border-image-slice: 1;
}
1
Ted

j'ai utilisé l'élément span à la place pour utiliser comme bordure en définissant sa propriété css. ci-dessous est mon code 

<div id="main_container">
        <div class="tl"></div>
        <div class="tr"></div>
        <div class="bl"></div>
        <div class="br"></div>
        <span class="borderH"></span>
        <span class="borderV"></span>
</div>

n voici mon css -

   #main_container{
    position:relative;
    width:480px;
    height:480px;
    background:#f9f9f9;
    border:1px solid #ff0000;
    left:20%;
    top:100px;
}
.tl { position: absolute; top: 0; left: 0; /*background: #ff0000;*/ border-right:1px none #000;width:50%;height:50%;  }
.tr { position: absolute; top: 0; left: 50%;/*background: blue;*/ border-bottom:1px none #000;width:50%;height:50%;}
.bl { position: absolute; top: 50%; left: 0; /*background: yellow;*/ border-top:1px none #000;width:50%;height:50%; }
.br { position: absolute; top: 50%; left: 50%; /*background: #80ff80;*/border-left:1px none #000;width:50%;height:50%; } 
.borderH{
    position: absolute; left: 0; top: 50%;height:1px;width:100%;
    background: -webkit-linear-gradient(left, #ff0000 , #80ff80); /* For Safari */
    background: -o-linear-gradient(right, #ff0000, #80ff80); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #ff0000, #80ff80); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #ff0000 , #80ff80); /* Standard syntax (must be last) */
}
.borderV{
    position: absolute; top: 0; left: 50%;width:1px;height:100%; 
    background: -webkit-linear-gradient(top, #ff0000 , #80ff80); /* For Safari */
    background: -o-linear-gradient(bottom, #ff0000, #80ff80); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom, #ff0000, #80ff80); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #ff0000 , #80ff80); /* Standard syntax (must be last) */
}

ce code générera la sortie comme ceci https://drive.google.com/file/d/0B2sRswnexZtfUVlTM0t2dWI3cjA/edit?usp=sharing

0
Umesh Chaurasiya

c'est une solution réelle aux gradients de frontière. S'il vous plaît regarder cette vidéo, il m'a permis de le faire sur mon site

Une histoire de gradients de frontière-Vidéo

0
chris_r

peut être un autre travail pour vous, mais j'ai des astuces très simples pour vous simplement remplacer image de fond par image de bordure comme

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
background-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e'); /* for IE */
background-color:#124f7e;

border-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
border-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
border-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e'); /* for IE */
border-color:#124f7e;
0
cgvector

voici un exemple de bordure de dégradé qui fonctionnerait sous Firefox:

#gradbor {
    border: 8px solid #000;
    -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    padding: 5px 5px 5px 15px;
}

Essayez quelque chose comme ça dans votre CSS pour que ça marche.

EDIT: Je ne sais pas si cela fonctionnera du tout sur d'autres navigateurs.

0
Fergus Barker

Voir la réponse à cette question: CSS3 Gradient Borders .

Fondamentalement, cela ne fonctionnera que dans Firefox pour le moment. Vous pouvez simplement utiliser des pseudo-éléments positionnés derrière l'élément réel avec des dégradés pour créer un effet similaire.

0
Nightfirecat