web-dev-qa-db-fra.com

Double bordure de couleur différente

Avec Photoshop, je peux mettre deux bordures différentes sur un élément de deux couleurs différentes. Et avec cela, je peux créer de nombreux effets de nuances dynamiques avec mes éléments. Même avec des effets Photoshop, je peux gérer cela avec Drop Shadow et Inner Shadow.

En ce qui concerne la conception Web, comment puis-je atteindre cet objectif avec CSS? Est-ce vraiment possible?
border with different color

NOTE: Je donne deux bordures à l'élément blanc: le bord extérieur est blanc et le bord intérieur est grisâtre. Ensemble, ils créent un aspect dynamique qui donne l'impression d'être un élément incrusté. L'élément blanc est doté d'un coussin en relief. Donc, la chose est un peu:

div.white{
   border: 2px solid white;
   border: 1px solid grey;
}

Mais vous savez que c'est une double déclaration et est invalide. Alors, comment puis-je gérer une telle chose en CSS?

Et si je mets border-style: double, alors vous savez que je ne peux pas passer deux couleurs différentes pour la bordure double.

div.white{
       border: double white grey;
}

De plus, je connais bien le préprocesseur LESS CSS. Donc, si une telle chose est possible en utilisant le préprocesseur CSS, veuillez me le faire savoir.

cssborderless
37
Mayeenul Islam

Vous pouvez également utiliser des pseudo-éléments pour le faire :) l'avantage de la solution de pseudo-éléments est que vous pouvez l'utiliser pour espacer la bordure interne à une distance arbitraire de la bordure réelle, et l'arrière-plan apparaîtra à travers cet espace . Le balisage:

body {
  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.double-border {
  background-color: #ccc;
  border: 4px solid #fff;
  padding: 2em;
  width: 16em;
  height: 16em;
  position: relative;
  margin: 0 auto;
}
.double-border:before {
  background: none;
  border: 4px solid #fff;
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  pointer-events: none;
}
<div class="double-border">
  <!-- Content -->
</div>

Si vous souhaitez des bordures consécutives (sans espace entre elles), vous pouvez utiliser plusieurs déclarations box-shadow (séparées par des virgules) pour le faire:

body {
  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.double-border {
  background-color: #ccc;
  border: 4px solid #fff;
  box-shadow:
    inset 0 0 0 4px #eee,
    inset 0 0 0 8px #ddd,
    inset 0 0 0 12px #ccc,
    inset 0 0 0 16px #bbb,
    inset 0 0 0 20px #aaa,
    inset 0 0 0 20px #999,
    inset 0 0 0 20px #888;
  /* And so on and so forth, if you want border-ception */
  margin: 0 auto;
  padding: 3em;
  width: 16em;
  height: 16em;
  position: relative;
}
<div class="double-border">
  <!-- Content -->
</div>

68
Terry

J'utilise contour une propriété CSS 2 qui fonctionne simplement. Check this out, est simple et même facile à animer:

.double-border {
  display: block;
  clear: both;
  background: red;
  border: 5px solid yellow;
  outline: 5px solid blue;
  transition: 0.7s all ease-in;
  height: 50px;
  width: 50px;
}
.double-border:hover {
  background: yellow;
  outline-color: red;
  border-color: blue;
}
<div class="double-border"></div>

14
David Felipe Camargo Polo

Utilisation de pseudo-élément comme suggéré par Terry a un PRO et un CON:

  1. PRO - excellente compatibilité entre navigateurs, car pseudo-élément sont également pris en charge sur les anciens IE.
  2. CON - il faut créer un élément supplémentaire (même s'il est généré), qui est en fait défini pseudo-élément.

Quoi qu'il en soit, c'est une excellente solution.

AUTRES SOLUTIONS:

Si vous acceptez la compatibilité dans la mesure où IE9 ( IE8 ne prend pas en charge cette opération ), vous pouvez obtenir le résultat souhaité de deux autres manières:

  1. utilisation de la propriété outline associée à border et à un seul insetbox-shadow
  2. en utilisant deux box-shadow combinés avec border.

Voici un jsFiddle avec le code modifié de Terry qui montre, côte à côte, ces autres solutions possibles. Les principales propriétés spécifiques de chacune d’elles sont les suivantes (les autres sont partagées dans la classe .double-border):

.left
{
  outline: 4px solid #fff;
  box-shadow:inset 0 0 0 4px #fff;
}

.right
{
  box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff;
}

MOINS code:

Vous avez demandé les avantages éventuels d'un pré-processeur tel que LESS. Dans ce cas précis, l’utilité n’est pas si grande, mais vous pouvez quand même optimiser quelque chose en déclarant des couleurs et des bordures ou des lignes/ombres avec @variable.

Voici un exemple de code CSS, déclaré dans LESS (le changement de couleur et la largeur de la bordure deviennent très rapides):

@double-border-size:4px;
@inset-border-color:#fff;
@content-color:#ccc;

.double-border 
{
  background-color: @content-color;
  border: @double-border-size solid @content-color;
  padding: 2em;
  width: 16em;
  height: 16em;
  float:left;
  margin-right:20px;
  text-align:center;
}

.left
{
  outline: @double-border-size solid @inset-border-color;
  box-shadow:inset 0 0 0 @double-border-size @inset-border-color;
}

.right
{
  box-shadow:0 0 0 @double-border-size @inset-border-color, inset 0 0 0 @double-border-size @inset-border-color;
}
5
Luca Detomi

Peut-être utiliser la propriété de contour

    <div class="borders">
      Hello
    </div>

    .borders{
    border: 1px solid grey; 
    outline: 2px solid white;
     }

https://jsfiddle.net/Ivan5646/5eunf13f/

3
Ivan

vous pouvez ajouter des bordures infinies en utilisant box-shadow en utilisant css3 Supposons que vous vouliez appliquer plusieurs bordures à une div alors le code est comme:

div {
    border-radius: 4px;
    /* #1 */
    border: 5px solid hsl(0, 0%, 40%);

    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);

    /* #3 
    outline: 5px solid hsl(0, 0%, 60%); */

    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px red,
        0 0 0 15px orange,
        0 0 0 20px yellow,
        0 0 0 25px green,
        0 0 0 30px blue;
}
2
Piyush Dholariya

Vous pouvez utiliser un contour avec un décalage de contour 

<div class="double-border"></div>
.double-border{
background-color:#ccc;
outline: 1px solid #f00;
outline-offset: 3px;
}
1
sameeuor

Essayez ci-dessous la structure pour appliquer deux bordures de couleur,

<div class="white">
    <div class="grey">
    </div>
</div>

.white
{
    border: 2px solid white;   
}

.grey
{
    border: 1px solid grey;   
}
0
Kishori

Vous pouvez utiliser les propriétés border et box-shadow avec les pseudo-éléments CSS pour obtenir un effet de type triple-frontière. Voir l'exemple ci-dessous pour savoir comment créer trois bordures au bas d'une div:

.triple-border:after {
    content: " ";
    display: block;
    width: 100%;
    background: #FFE962;
    height: 9px;
    padding-bottom: 8px;
    border-bottom: 9px solid #A3C662;
    box-shadow: -2px 11px 0 -1px #34b6af;
}
<div class="triple-border">Triple border bottom with multiple colours</div>

Vous devrez jouer avec les valeurs pour obtenir le bon alignement. Cependant, vous pouvez également obtenir plus de flexibilité, par exemple 4 frontières si vous mettez certains des attributs dans l'élément approprié plutôt que le pseudo sélecteur.

0
Muhan Alim