1. Konzept
Ein Umriss ist eine Linie, die um ein Element herum gezeichnet wird und sich außerhalb des Randes befindet, um das Element hervorzuheben.
Beispiel: Wenn wir normalerweise Inhalte im Browser lesen und die Maus klickt, um einen Tag-Link oder ein Eingabe-Optionsfeld zu fokussieren, wird das Element von einem gepunkteten Rahmen umgeben. Dieser gepunktete Rahmen ist der Umriss.
Wenn Sie auf ein Tag klicken, eine Eingabe machen oder ein Mausklickereignis hinzufügen, hinterlässt der Browser standardmäßig einen Umrissrahmen (blau unter Chrom). Allerdings beeinträchtigen diese standardmäßigen Umrissrahmen manchmal das Erscheinungsbild und zerstören den Gesamteffekt der Frontend-Seite. Wir möchten sie nicht wirklich beibehalten. Wie kann man also den standardmäßigen Umrissrahmen des Browsers entfernen oder den standardmäßigen Umrissrahmeneffekt ändern?
Die CSS-Eigenschaft „Umriss“ gibt den Stil, die Farbe und die Breite des Umrisses eines Elements an.
Umrisse und Ränder sehen sehr ähnlich aus, es gibt jedoch Unterschiede zwischen ihnen, zum Beispiel:
(1) Stil, Breite und Farbe des Rahmens in den vier Richtungen des Elements können unabhängig voneinander festgelegt werden. Breite, Stil und Farbe des Umrisses in den vier Richtungen des Elements sind jedoch gleich und können nicht festgelegt werden individuell;
(2) Die Breite des Rahmens wirkt sich direkt auf die Größe des Elements aus, während die Gliederung keinen Platz auf der Seite einnimmt und sich nicht auf das Layout der Seite auswirkt, die Gliederung jedoch andere Elemente auf der Seite überlappt.
(3) Der Umriss überlagert nicht nur den Klang umgebender Elemente, sondern hat auch keine Auswirkungen auf umgebende Elemente.
(4) Der Rand ist Teil der Größe des Elements, der Umriss jedoch nicht, was bedeutet, dass sich die Größe des Elements unabhängig von der Breite des Umrisses nicht ändert.
(5) Der Umriss kann nicht rechteckig sein, Sie können jedoch nicht direkt einen kreisförmigen Umriss erstellen.
2. Eigenschaften
Mit den folgenden Eigenschaften können Sie einen Umriss für ein Element festlegen:
(1) Gliederung: Legen Sie alle Gliederungsattribute in einer Anweisung fest, das Abkürzungsattribut der Gliederung. Sie können das Gliederungsattribut verwenden, um die oben genannten drei Gliederungsattribute gleichzeitig festzulegen.
Outline-ColorOutline-StyleOutline-Widthinherit
●Umrisswerte können in beliebiger Reihenfolge aufgelistet werden und diese Werte können ignoriert werden.
●JavaScript-Syntax
object.style.outline=#0000FFdottedthin
(2) Umrissfarbe: Legen Sie die Farbe des Umrisses fest.
Farbnamehex-Nummerrgb-Nummerinvertinherit
●Hinweis: Bitte deklarieren Sie immer das Attribut „outline-style“ vor dem Attribut „outline-color“. Die Farbe des Umrisses eines Elements kann erst geändert werden, nachdem es seinen Umriss erhalten hat.
●Das Attribut „outline-color“ legt die Farbe des sichtbaren Teils des gesamten Umrisses eines Elements fest.
●JavaScript-Syntax
object.style.outlineColor=#0000FF
(3) Gliederungsstil: Legen Sie den Stil der Gliederung fest.
keinegepunktetgestricheltdurchgehenddoppelrillegratinsetoutsetinherit
● Das Attribut „outline-style“ wird verwendet, um den gesamten Umriss eines Elements zu formatieren. Der Stil darf nicht „none“ sein, da sonst die Gliederung nicht angezeigt wird.
●Hinweis: Bitte deklarieren Sie immer das Attribut „outline-style“ vor dem Attribut „outline-color“. Die Farbe des Umrisses eines Elements kann erst geändert werden, nachdem es seinen Umriss erhalten hat.
●Konturlinien nehmen keinen Platz ein und sind nicht unbedingt rechteckig.
●JavaScript-Syntax
object.style.outlineStyle=gepunktet
(4) Umrissbreite: Legen Sie die Breite des Umrisses fest.
dünnmitteldickLängeerben
●Hinweis: Bitte deklarieren Sie immer das Attribut „outline-style“ vor dem Attribut „outline-width“. Die Farbe des Umrisses eines Elements kann erst geändert werden, nachdem es seinen Umriss erhalten hat.
●Breite darf keine negative Zahl sein
●JavaScript-Syntax
object.style.outlineWidth=dünn
(5) Umriss-Offset: Legen Sie den Abstand zwischen Umriss und Rand fest
Beispiel:
<!DOCTYPEhtml><html><head><styletype=text/css>p{text-align:center;border:redsolidthin;outline:#00ff00dottedthick;}</style></head><body><p>Dotcpp Jeder ist herzlich willkommen, Programmieren zu lernen</p></body></html>Laufergebnisse:
