CSS Umrandung (Umrandung)

(outline) Die Kontur ist eine Linie, die außerhalb der Kante des Elements (z.B. Button, aktives Formularfeld usw.) gezeichnet wird, um es hervorzuheben.

Kontur (Outline) VS Rand (Border)

Der Umriss wird normalerweise verwendet, um Elemente hervorzuheben. Der Umriss scheint auf den ersten Blick sehr ähnlich zum Rand zu sein, aber er unterscheidet sich in folgenden Punkten:

• Der Umriss nimmt keinen Raum ein, da er immer auf dem oberen Rand des Elementsrahmens platziert wird, was zu einer Überlappung mit anderen Elementen auf der Seite führen kann.

• Im Gegensatz zum Rand ermöglicht der Umriss es uns nicht, jede Kante auf eine unterschiedliche Breite zu setzen, und auch nicht, für jede Kante eine unterschiedliche Farbe und einen anderen Stil zu setzen. Der Umriss ist in allen Aspekten gleich.

• Der Umriss hat außer dem Überlappen keinen Einfluss auf die umliegenden Elemente.

• Im Gegensatz zum Rand ändert der Umriss neither die Größe noch die Position des Elements.

• Der Umriss kann nicht rechteckig sein.

outline-width Umrissbreite Eigenschaft

outline-Die width-Eigenschaft gibt die Breite des hinzuzufügenden Umrisses des Elements an. Ihr Wert sollte eine CSS-Länge (px, pt, em usw.) oder eines der erlaubten Schlüsselwörter sein, aber Prozente oder negative Werte sind nicht erlaubt. Genau wieborder-widthEigenschaft gleich.

p {
　　　　outline-width: thick;
}

outline-style Umrissstil Eigenschaft

Das outline-style-Eigenschaft setzt den Stil des Umrisses fest, wie z.B. solid, dotted usw.

Diese Eigenschaft kann einen der folgenden Werte annehmen: none, hidden, dashed, dotted, double, groove, inset, outset, ridge und solid. Genau wieborder-styleWerte sind gleich.

p {
　　　　outline-style: double;
}

outline-color Umrissfarbe Eigenschaft

outline-Die color-Eigenschaft setzt die Farbe des Umrisses fest.

p {
　　　　outline-style: solid;
　　　　outline-color: black;
}

Sie können auch outline-color für transparent.

Konturabkürzungseigenschaft

Die CSS outline-Eigenschaft ist eine Abkürzung für die Festlegung einer oder mehrerer单独er Kontureigenschaften mit dem Kurznamen outline-style, outline-width und outline-color in einer einzigen Regel.

p {
　　　　outline:　5px solid #9acd32;
}

Wenn bei der Festlegung der Kurvenkürzelattribute der Wert eines einzelnen Kurvenattributes ignoriert oder nicht angegeben wird, wird outline die Standardwerte dieses Attributes (wenn vorhanden) verwenden.

Im folgenden Beispiel wird die Kontur eine Breite von5px schwarze gestrichelte Linie:

p {
　　　　color: black;
　　　　outline:　5px solid;
}

aber in den Fällenoutline-style，das Auslassen dieses Wertes zeigt keine Kontur an, weil outline-Der Standardwert von styleproperty ist none.

Im folgenden Beispiel wird es keine Kontur geben:

p {
　　　　outline:　5px #00ff00;
}

Entfernen Sie die Wellenlinien um aktive Links

Die outline-Eigenschaft wird weit verbreitet verwendet, um die Wellenlinien um aktive Links zu entfernen.

a, a:acive, a:focus {
　　　　outline: none;　/*　Funktioniert in Firefox, Chrome, IE8　und darüber　*/
}