CSS double bordure (2 couleurs) sans utiliser de contour?

Je me demandais ce que vous en pensez est la meilleure façon d'obtenir une bordure double avec 2 couleurs autour d'un div? J'ai essayé à l'aide de la frontière et contour ensemble et il a travaillé dans Firefox, mais le contour ne semble pas fonctionner sous IE, et c'est à ce genre de problème. Toutes les bonnes façons d'aller à ce sujet?

C'est ce que j'ai eu, mais le contour ne fonctionne pas avec IE:
aperçu: 2px solid #36F;
border: 2px solid #390;

Grâce.

source d'informationauteur zProgrammer

  1. 36

    Vous pouvez ajouter plusieurs frontières à l'aide de pseudo-éléments, et puis les placer autour de votre original de la frontière. Pas de supplément de balisage. Croix-navigateur compatible, ce qui a été autour depuis CSS 2.1.
    J'ai jeté une démo sur jsfiddle pour vous....remarque, l'espacement entre les couleurs de bordure est pour l'exemple. Vous pouvez la fermer en modifiant le nombre de pixels dans le positionnement absolu. 

    .border
{
    border:2px solid #36F; 
    position:relative;
    z-index:10
}

.border:before 
{
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    top:2px;
    left:2px;
    right:2px;
    bottom:2px;
    border:2px solid #36F
}

    http://jsfiddle.net/fvHJq/1/

  2. 8

    Utilisation de la boîte de l'ombre fo 2e frontière.

    div.double-border {
    border: 1px solid #fff;
    -webkit-box-shadow: 0px 0px 0px 1px #000;
    -moz-box-shadow: 0px 0px 0px 1px #000;
    box-shadow: 0px 0px 0px 1px #000;
}

    Dans ce cas-box-shadow n'ignore pas les border-radius de la propriété comme le contour ne

  3. 2

    Une solution très simple que vous pouvez utiliser comme une solution de repli si rien d'autre ne serait d'utiliser deux divs. Votre div principale, puis un vide juste en l'enveloppant que vous pouvez utiliser pour définir la deuxième frontière.

  4. 0

    La fin de la partie pour cette question, mais je me sens comme je devrais l'enregistrer quelque part. Vous pouvez faire une solution évolutive à la fonction dans quelque chose comme Moins ou un Stylet qui permettra de créer n'importe quel nombre de frontières (Stylet ici):

    abs(n)
    if n < 0
        (-1*n)
    else
        n

horizBorder(n, backgroundColor)
    $shadow = 0 0 0 0 transparent
    $sign = (n/abs(n))
    for $i in ($sign..n)
        /* offset-x | offset-y | blur-radius | spread-radius | color */
        $shadow = $shadow, 0 (2*$i - $sign)px 0 0 #000, 0 (2*$i)px 0 0 backgroundColor
    return $shadow

    Puis,

    $background: #FFF //my background was white in this case and I wanted alternating black/white borders

.border-bottom
    box-shadow: horizBorder(5, $background)
.border-top
    box-shadow: horizBorder(-5, $background)
.border-top-and-bottom
    box-shadow: horizBorder(5, $background), horizBorder(-5, $background)
  5. 0

    Avec box-shadow, vous pouvez réaliser autant de bordures en couleur comme vous le souhaitez. E. g:

    #mydiv{
  height: 60px;
  width: 60px;
  box-shadow: inset 0 0 0 5px #00ff00, inset 0 0 0 10px #0000ff;
}

<div id="mydiv">&nbsp;</div>

    https://jsfiddle.net/aruanoc/g5e5pzny

  6. 0

    Un petit truc 😉

    box-shadow: 
0 0 0 2px #000,
0 0 0 3px #000,
0 0 0 9px #fff,
0 0 0 10px #fff,
0 0 0 16px #000,
0 0 0 18px #000;