web-dev-qa-db-fra.com

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

Je me demandais ce que vous pensiez être le moyen le plus simple d’obtenir une double bordure avec 2 couleurs autour d’un div? J'ai essayé d'utiliser bord et contour ensemble et cela a fonctionné dans Firefox, mais contour ne semble pas fonctionner dans IE et c'est en quelque sorte un problème. Des bonnes façons de s'y prendre?

C’est ce que j’avais mais le plan ne fonctionne pas avec IE: contour: solide 2px # 36F; bordure: solide 2px # 390;

Merci.

htmlcssborderpseudo-element
13
zProgrammer

Vous pouvez ajouter plusieurs bordures à l'aide de pseudo-éléments, puis les placer autour de votre bordure d'origine. Pas de balisage supplémentaire. Compatible entre plusieurs navigateurs, cela existe depuis CSS 2.1. J'ai jeté une démo sur jsfiddle pour vous .... remarque, l'espacement entre les couleurs des bordures est là pour l'exemple. Vous pouvez le 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/

36
albert

Utilisez l'ombre de la boîte pour la 2e bordure.

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 la propriété border-radius comme le fait le contour

8
Vitali Protosovitski

Une solution très simple que vous pourriez utiliser comme solution de rechange si rien d'autre ne devait utiliser deux divs. Votre division principale, puis une division vide qui vient de l’envelopper et que vous pouvez utiliser pour définir la seconde bordure.

2
Nick Mitchinson

.border{
  width: 200px;
  height: 200px;
  background: #f06d06;
  position: relative;
  border: 5px solid blue;  
  margin: 20px;
}
.border:after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: green;
  z-index: -1;
}
<div class="border">
  
</div>

utilisez le nom de la classe pour .border en fonction des valeurs border:2px solid #000 pour une bordure unique. Ensuite, vous voulez une autre bordure, essayez d'utiliser .border:after en fonction des valeurs si vous obtenez une deuxième bordure au-dessus de l'exemple de code exemple. 

0
user8450943

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;
0
TheCrazyProfessor

En retard à la fête pour cette question, mais je sens que je devrais enregistrer cela quelque part. Vous pouvez créer une fonction évolutive dans Less ou Stylus, qui créera un nombre quelconque de bordures (Stylus 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

Ensuite,

$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)
0
chas

Avec Box-Shadow, vous pouvez créer autant de bordures de couleurs que vous le souhaitez. Par exemple:

#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

0
aruanoc