CSS Double Border mit Außenrand dicker als Innenrand

Question

In meiner aktuellen Arbeit muss ich einen doppelten Rand auf einem Container erzeugen. Der Grenzstil: doppelt; erreichen dies, aber mein Kunde möchte die äußere Grenze dicker sein & der innere Rand der normalen Dicke sein.

Anders als das Erstellen von 2 divs, 1 verschachtelt in einem anderen mit dem äußeren div mit einer größeren Dicke oder durch die Verwendung von Border Images gibt es keine Möglichkeit, wie ich es mit CSS mit nur 1 div tun kann? Festlegen von Rahmenstil: double; und immer noch in der Lage sein, die äußere Grenze dicker zu machen.

Answer 1

Umrisse sind in der CSS3-Spezifikation enthalten und ermöglichen die Anwendung eines Rahmens und eines Umrisses auf ein einzelnes Element.

Die Umrisseigenschaft ist identisch mit dem Rahmenbefehl. Die zusätzliche Offset-Eigenschaft ermöglicht es jedoch, die Grenze weiter innerhalb oder außerhalb des Elements zu verschieben.

Ich verwendete Umrisse, um Grenzen 2 verschiedene Farben zu geben, ändere den Code, um deinen Grenzen 2 verschiedene Größen zu geben.

#box { 
border: 1px double #000; 
outline: 2px solid #699; 
outline-offset: -9px; 
}

Answer 2

Nein, das ist nicht möglich. Die CSS-Rahmenbreite gibt unabhängig vom Rahmenstil die Gesamtdicke des Rahmens an. Ich sehe keinen besseren Weg, als ihn in einem anderen DIV zu verpacken.

Edit: Sie es hacken könnte outline in Verwendung, aber es gibt eine subtle difference between outline and border.

border: double 4px black; 
outline: solid 3px black; 

(dies wird eine 1px innere und 4px äußeren „Grenze“ produzieren, wenn man es so nennen kann)

Answer 3

Oder Sie könnten eine Grenze Bild mit diesen schicken neuen Sachen in CSS3 verwenden, obwohl es wouldn Diese Option wird in den meisten derzeit verwendeten Browsern nicht unterstützt.

Answer 4

Sie können auch die Verwendung: vor Pseudo-Elemente wie folgt:

https://stackoverflow.com/a/11179169/1468708

Damit Sie eine doppelte Grenze mit unterschiedlichen Dicke nur am Boden, zum Beispiel haben.