Bordo doppio CSS (2 colori) senza utilizzare il contorno?

Question

Mi stavo chiedendo cosa ne pensate voi sia il modo più semplice per ottenere un doppio bordo con 2 colori attorno a un div? Ho provato a utilizzare bordi e contorni e ha funzionato in Firefox, ma il profilo non sembra funzionare in IE e questo è un problema. Qualche buon modo per andare su questo?

Questo è quello che avevo ma il contorno non funziona con IE: schema : 2px solid # 36F; Bordo : 2px solid # 390;

Grazie.

Answer 1

È possibile aggiungere più bordi utilizzando gli pseudo elementi e posizionarli attorno al bordo originale. Nessun markup extra. Compatibile con browser diversi, questo è stato usato sin dai CSS 2.1. Ho lanciato una demo su jsfiddle per te .... nota, la spaziatura tra i colori dei bordi è lì per l'esempio. Puoi chiuderlo modificando il numero di pixel nel posizionamento assoluto.

.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/

Answer 2

Una soluzione molto semplice che si può usare come fallback se non altro sarebbe utilizzare due div. Il tuo div principale e poi uno vuoto che lo avvolge e che puoi utilizzare per impostare il secondo bordo.

Answer 3

Usa scatola di ombra fo 2 ° confine.

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; 
} 

In questo caso box-shadow non ignora proprietà border-radius come contorno fa

Answer 4

in ritardo alla festa per questa domanda, ma mi sento come se dovessi registrare questo da qualche parte. È possibile effettuare una funzione scalabile in qualcosa di simile Meno o stilo che creerà un numero qualsiasi di confini (Stilo qui):

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 

Poi,

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

Answer 5

con box-shadow è possibile ottenere come molti diversi bordi di colore come vuoi Ad esempio:

#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

Answer 6

Un piccolo trucco;)

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; 

Answer 7

.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>

utilizzare il nome della classe per .border date le valli border:2px solid #000 per singola border.then tu wan t un altro confine prova a .border:after dato i valori se hai il check-out del secondo bordo sopra il codice esempio esempio