Detaillierte Erläuterung der Verwendung von CSS-Outlines

Wie bereits erwähnt

Der Umriss ist nicht wie der Rand am Dokumentenfluss beteiligt. Daher hat das Erscheinen oder Verschwinden des Umrisses keinen Einfluss auf den Dokumentenfluss Das heißt, das Dokument wird nicht erneut geöffnet. Mit Umrissen kann der Browser Teilumrisse zusammenführen, um eine kontinuierliche, aber nicht rechteckige Form zu erstellen. Standardmäßig ist Umriss ein dynamischer Stil, der nur gerendert wird, wenn das Element den Fokus erhält oder aktiviert ist

[Hinweis] Der IE7-Browser unterstützt den

Umrissstil nicht

Ähnlich wie bei Rändern ist der grundlegendste Aspekt einer Gliederung der Stil. Wenn eine Gliederung keinen Stil hätte, würde die Gliederung überhaupt nicht existieren. Anders als bei der Umrandung fehlt der Wert: keine gestrichelte | |.inset |.inherit

Anfangswert: keine

Gilt für: alle Elemente

Vererbung: keine

Umrissbreite

Ähnlich wie bei Rahmen darf die Umrissbreite weder negativ sein, noch kann sie als Prozentwert angegeben werden

outline-width

Werte: dünn | mittel |. dick |. |. Anfangswert: mittel

Vererbung: keine

Umriss Der Stil ist keiner, dann ist der berechnete Wert für die Umrissbreite 0

Umrissfarbe

Im Gegensatz zum Rand hat die Umrissfarbe das Schlüsselwort „invertieren“. Den Umriss umkehren, was bedeutet, dass die Farbe der Pixel, an denen sich der Umriss befindet, vollständig umgedreht wird, sodass der Umriss in verschiedenen Hintergrundfarben sichtbar wird. Tatsächlich wird das Schlüsselwort invert jedoch nur vom IE-Browser unterstützt. Die Umrissfarbe anderer Browser ist die Vordergrundfarbe des Elements selbst

outline-color

Wert: |. inherit

Anfangswert: invertieren (IE), Vordergrundfarbe (andere Browser)

Gilt für: alle Elemente

Vererbung : Keine

Konturversatz

Der Konturversatz wird verwendet, um den Wert der Versatzposition der Kontur zu definieren. Wenn der Parameterwert eine positive Zahl ist, bedeutet dies, dass die Kontur nach außen verschoben wird; wenn der Parameterwert ein negativer Wert ist, bedeutet dies, dass die Kontur nach innen verschoben wird

[Hinweis] Der IE-Browser tut dies nicht support

outline-offset

Wert: length | inherit

Anfangswert: 0

Gilt für: alle Elemente

Vererbung: Keine

Umriss

Der Umrissumriss ähnelt dem Rahmenattribut des Rahmenstils, sodass der Umrissstil, die Breite und die Farbe gleichzeitig festgelegt werden können . Da ein gegebener Umriss einen einheitlichen Stil, eine einheitliche Breite und eine einheitliche Farbe haben muss, ist Umriss die einzige Abkürzungseigenschaft für Umrisse. Es gibt keine Attribute wie „outline-top“ oder „outline-right“ für den Umriss

[Hinweis] Umriss enthält keinen Umriss-Offset, und Umriss-Offset muss separat eingestellt werden

Umriss

Wert: [ || ] | an: Alle Elemente

Vererbung: Keine

Anwenden

Da der Umriss keinen Einfluss auf die Boxmodellgröße des Elements hat, hat er keinen Einfluss das

Seitenlayout

, sodass Sie mithilfe der Umrisslinie den Randeffekt imitieren können. Aber wenn es ein

abgerundeter Rand

ist, ist es nicht so einfach.

Der Firefox-Browser unterstützt das private Attribut -moz-outline-radius, um die abgerundeten Ecken des Umrisses festzulegen. Die diesem Attribut entsprechende js-Schreibmethode ist MozOutlineRadius

Für andere Browser können wir andere Attribute verwenden, um ähnliche Effekte zu erzielen. Die Attribute box-shadow und border-radius haben denselben Ursprung, das heißt, wenn der border-radius gerundet ist, wird auch die Projektion von box-shadow gerundet

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von CSS-Outlines. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!