Das CSS Die Eigenschaft outline ist eine verwirrende Eigenschaft. Wenn Sie es zum ersten Mal kennen, ist es schwer zu verstehen, wie es sich auch nur im Entferntesten vom Grenzeigentum unterscheidet. Das W3C erklärt es mit den folgenden Unterschieden:
- Konturen nehmen keinen Platz ein.
- Umrisse können nicht rechteckig sein.
Umrisse nehmen keinen Platz ein
Diese Aussage an sich ist verwirrend. Wie kann ein Objekt auf Ihrer Webseite keinen Platz auf der Webseite einnehmen? Aber wenn Sie sich Ihre Webseite wie eine Zwiebel vorstellen, kann jedes Element auf der Seite über einem anderen Element liegen. Die Gliederungseigenschaft nimmt keinen Platz ein, da sie immer über der Box des Elements platziert wird.
Wenn ein Umriss um ein Element herum platziert wird, hat dies keinen Einfluss darauf, wie dieses Element auf der Seite angeordnet wird. Es ändert weder die Größe noch die Position des Elements. Wenn Sie einem Element einen Umriss hinzufügen, nimmt es genauso viel Platz ein, als hätten Sie keinen Umriss dieses Elements. Dies gilt nicht für a
Rand. Ein Rahmen an einem Element wird der äußeren Breite und Höhe des Elements hinzugefügt. Also wenn du ein. hättest Bild das war 50 Pixel breit, mit einem 2-Pixel-Rand würde es 54 Pixel (2 Pixel für jeden Seitenrand) beanspruchen. Das gleiche Bild mit einem 2-Pixel-Umriss würde auf Ihrer Seite nur 50 Pixel Breite einnehmen, der Umriss würde über dem äußeren Rand des Bildes angezeigt.Umrisse können nicht rechteckig sein
Bevor Sie anfangen zu denken "cool, jetzt kann ich Kreise zeichnen", denken Sie noch einmal nach. Diese Aussage hat eine andere Bedeutung, als Sie vielleicht denken. Wenn Sie ein Element mit einem Rahmen versehen, interpretiert der Browser das Element so, als wäre es ein riesiger rechteckiger Kasten. Wenn die Box auf mehrere Zeilen aufgeteilt wird, lässt der Browser nur die Kanten offen, da die Box nicht geschlossen ist. Es ist, als würde der Browser den Rand mit einem unendlich breiten Bildschirm sehen – breit genug, dass dieser Rand ein durchgehendes Rechteck ist.
Im Gegensatz dazu berücksichtigt die Umrisseigenschaft Kanten. Wenn sich ein umrandetes Element über mehrere Zeilen erstreckt, schließt sich die Umrandung am Ende der Zeile und öffnet sich in der nächsten Zeile wieder. Wenn möglich, bleibt der Umriss auch vollständig verbunden, sodass eine nicht rechteckige Form entsteht.
Verwendungen der Outline-Eigenschaft
Eine der besten Anwendungen der Eigenschaft outline ist das Hervorheben von Suchbegriffen. Viele Sites tun dies mit einer Hintergrundfarbe, aber Sie können auch die Gliederungseigenschaft verwenden, ohne sich um zusätzliche Abstände auf Ihren Seiten zu kümmern.
Die Umrissfarbe-Eigenschaft akzeptiert den Begriff "invertieren", wodurch die Umrissfarbe zur Umkehrung des aktuellen Hintergrunds wird. Auf diese Weise können Sie Elemente auf dynamischen Webseiten hervorheben, ohne wissen zu müssen, was Farben werden verwendet.
Sie können die Umrisseigenschaft auch verwenden, um die gestrichelte Linie um aktive Links zu entfernen. Dieser Artikel von CSS-Tricks zeigt, wie es geht entferne die gepunktete Umrandung.