CSS-Doppelrahmen (2 Farben) ohne Umriss zu verwenden?

Question

Ich frage mich, was ihr denkt, ist der einfachste Weg, um eine doppelte Grenze mit 2 Farben um ein div zu bekommen? Ich habe versucht, Rand und Umriss zusammen zu verwenden, und es funktionierte in Firefox, aber Gliederung scheint nicht in IE zu funktionieren, und das ist ein Problem. Irgendwelche guten Wege, das zu tun?

Das ist, was ich hatte, aber Umriss funktioniert nicht mit IE: Umriss: 2px solid # 36F; Grenze: 2px Körper # 390;

Danke.

Answer 1

Sie können mehrere Rahmen mit Pseudoelementen hinzufügen und sie um den ursprünglichen Rahmen herum platzieren. Kein zusätzliches Markup. Cross-Browser-kompatibel, gibt es seit CSS 2.1. Ich habe eine Demo auf jsfiddle für Sie geworfen .... beachten Sie, dass der Abstand zwischen den Rahmenfarben für das Beispiel da ist. Sie können es schließen, indem Sie die Anzahl der Pixel in der absoluten Positionierung ändern.

.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

Eine sehr einfache Lösung, die Sie als Fallback verwenden könnten, wenn nichts anderes wäre, zwei divs zu verwenden. Dein Hauptteil und dann ein leeres Teil, das es nur umschließt, damit du den zweiten Rand festlegen kannst.

Answer 3

Verwenden Box Schatten fo 2. Grenze.

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 diesem Fall box-shadow nicht border-radius Eigenschaft wie Umriss hat

Answer 4

spät, um die Partei zu dieser Frage, aber ich fühle mich wie ich soll diese irgendwo aufnehmen ignorieren. Sie können eine skalierbare Funktion in so etwas wie weniger oder Stylus machen, die eine beliebige Anzahl von Grenzen schaffen (Stylus hier):

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 

Dann

$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

Mit box-shadow können Sie so viele erreichen unterschiedliche Farbe Grenzen wie Sie wollen. ZB:

#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

Ein kleiner Trick;)

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>

verwenden Sie den Klassennamen für .border angesichts der vales border:2px solid #000 für einzelne border.then du wanst t anderen Rand versuchen .border:after gegeben die Werte, wenn Sie zweite Grenze haben, überprüfen Sie über dem Codebeispiel Beispiel