CSS Outset / Inset, Rahmen und Umriss
Was ist der genaue Unterschied zwischen CSS outset,inset,border and outline .
Wirklich zusammengekoppelt darüber, und welche Eigenschaften können zusammen angewendet werden?
Welche Browser unterstützen welche der oben genannten Eigenschaften?
Ein kurzes Beispiel für obige Eigenschaften wird gut sein.
Danke
3 Antworten
Rand- und Umrissunterschiede
Rahmen: Die Umrandung umgibt den Rahmen des Rahmens. Der Bereich zählt die Gesamtgröße des Boxmodells. Sie können die Größe ( border-width ), die Farbe ( border-color ) und den Stil ( border-style ) für jeden der vier möglichen Ränder (oben, rechts, unten und links) angeben. Sie können weitere Informationen zu den Grenzeigenschaften hier abrufen.
Outline: Ähnlich wie border, aber nehmen Sie in diesem Fall keinen Platz ein, gegenüber border . Außerdem können Sie nicht jeden Rahmen einzeln formatieren, der Umrissstil gilt für alle vier Seiten des Rahmens. Outline kann zusammen border verwendet werden. Eigenschaften, die Sie auf den Umriss anwenden können, sind outline-color , outline-style und outline-width Sie können weitere Informationen über die Umrisseigenschaften erhalten hier .
Hier ist ein Box-Modell, das outline und border repräsentiert
Border-Styles: Einfügung und Anfang
Einschub: Es ist ein Rahmenstil a> . Der Rahmen lässt die Box so aussehen, als wäre sie in die Leinwand eingebettet. Sie können dieses border-style in border-color und border-width verwenden.
Outset: Ein weiterer border-style . Das Gegenteil von "Inset": Der Rahmen lässt die Box so aussehen, als käme sie aus der Leinwand. Sie können dieses border-style in border-color und border-width verwenden.
Dokumentation und Quellen
das sind eine Eigenschaft von border
Einfügung: Definiert einen 3D-Einfügerand. Der Effekt hängt vom Wert der Rahmenfarbe ab Anfang: Definiert eine 3D-Anfangsgrenze. Der Effekt hängt vom Wert der Rahmenfarbe ab Umriss: Legen Sie den Umriss um ein Element fest
Erste Antwort ist eine gute Antwort. Ich wünschte, wir hätten dies vor zwei Monaten gefunden, als wir mit html-dom begannen.
Würde nur hinzufügen: hier ist der große Unterschied, dass border keine offset -Eigenschaft hat (ein "Padding" eines "Rahmens", der die Platzierung von Elementen nicht beeinflusst) und outline nicht mit der Eigenschaft -radius abgerundet werden.