DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die `outline`-Eigenschaft in CSS zeichnet eine Linie um das Äußere eines Elements. Sie ähnelt `border`, mit der Ausnahme, dass
- Sie immer um alle Seiten geht, Sie können keine bestimmten Seiten angeben
- Sie ist kein Teil des Box-Modells, daher beeinträchtigt sie nicht die Position des Elements oder benachbarter Elemente (gut für die Fehlersuche!).
Weitere kleinere Fakten sind, dass sie border-radius nicht beachtet (macht Sinn, da es kein Rand ist) und nicht immer rechteckig ist. Wenn der Umriss beispielsweise ein Inline-Element mit unterschiedlichen Schriftgrößen umgibt, zeichnet Opera eine versetzte Box darum.
Sie wird oft aus Gründen der Barrierefreiheit verwendet, um einen Link hervorzuheben, wenn er mit der Tabulatortaste angetippt wird, ohne die Position zu beeinträchtigen und auf andere Weise als beim Hover.
a:focus {
outline: 1px dashed red;
}Kurzschreibweise
outline: [ <outline-width> || <outline-style> || <outline-color> ] | inheritSie verwendet dieselben Eigenschaften wie `border`, aber mit "outline-" anstelle von.
Die obige Kurzschreibweise hätte geschrieben werden können
a:focus {
outline-width: 1px;
outline-style: dashed;
outline-color: red;
}Notizen
- Sie können keinen Umriss für nur eine (oder zwei oder drei) Seiten eines Elements festlegen. Nur alle Seiten. Es gibt kein `outline-top`, `outline-right`, `outline-bottom` oder `outline-left` wie bei `border`.
- Versuchen Sie, die Konsole auf einer beliebigen Website zu öffnen und `document.head.insertAdjacentHTML("beforeend", "<style>* { outline: 1px solid red; }</style>");` auszuführen – Sie werden sehen, dass die Struktur vieler Websites dadurch hervorgehoben wird.
outlinewird standardmäßig für `:focus`-Stile verwendet. Denken Sie daran, wenn Sie jemals `outline`-Stile entfernen, wie z. B. `a:focus { outline: 0; }`, müssen Sie sie mit einer anderen visuell unterscheidbaren Stilart wieder hinzufügen.
Mehr Infos
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | 1.2+ | 1.5+ | 7+ | 8+ | Alle | 3.1+ |
Ich stimme dafür, dass sie eine Regel einreichen, die es uns erlaubt, anzugeben, auf welcher Seite der Umriss angezeigt wird, und uns auch erlaubt, den Eckradius festzulegen, um unser Design anzupassen. Manchmal ruiniert eine gerade Kante das Aussehen des Layouts. Ich weiß, dass wir sie ausschalten und :focus verwenden und die Ränder einschalten können, um das zu tun, aber warum nicht die Option zulassen. Alles, was wir mit dem Rand tun können, sollten wir mit der outline-Eigenschaft tun können. Jemand sollte es den richtigen Leuten zur zukünftigen Verbesserung einreichen.
Ich stimme voll und ganz zu. Ich hoffte, den Umriss nur auf einer Seite zu verwenden, wie zum Beispiel
outline-right: 2px #333 solid;Verwenden Sie einfach outline: none; border-right: ... und es ist fast der gleiche Effekt.
Ja! Danke.
outline : 0; ist in Chrome/Chromium erforderlich, um den standardmäßigen blauen Umriss um Eingabe- und Textbereichselemente zu entfernen.
outline : 0; i
ist in Chrome/Chromium erforderlich, um den standardmäßigen blauen Umriss um Eingabe- und Textbereichselemente zu entfernen.
outline : 0;
ist in Chrome/Chromium erforderlich, um den standardmäßigen blauen Umriss um Eingabe- und Textbereichselemente zu entfernen.
Interessant. Unter Firefox 31.0 musste ich "outline-style: auto;" auf einem DIV setzen, das ein Bild enthielt, um ein seltsames Clipping-Problem zu beheben, wenn das Bild mit translateY(-20px) auf DIV:hover verschoben wurde. Der Teil des Bildes, der über das Boxmodell des DIV hinausging, wurde für den Bruchteil einer Sekunde abgeschnitten, bevor er wieder richtig angezeigt wurde.
Es gab auch einige andere Kombinationen, die funktionierten, wie z. B. "outline: 0px solid transparent" usw. Die Standardwerte scheinen (zumindest bei Chrome) "outline: 0px none rgb(255, 255, 255" zu sein.
Ich habe dieses Problem weder bei Chrome noch bei IE gesehen.
Und dumm, unter Chrome setzt "outline-style: auto" auch "outline-width: 3px", daher ist die beste Option wahrscheinlich "outline: 0 solid transparent" oder so etwas...
"1. Sie geht immer um alle Seiten, Sie können keine bestimmten Seiten angeben"
Einwand, Euer Ehren! Ein weiterer glorreicher "Was wäre wenn"-Flop!
http://stackoverflow.com/questions/28142833/border-outline-html5-css3
Wir können dieses Border-Image-Border zu NUR EINER SEITE setzen. Die RIESIGE Frage ist also: Wenn wir ein Border-Image verwenden, und da img einer der ursprünglichen IE1+-Anhängsel an outlines ist, warum können wir dieses [Border]-Image nicht irgendwie so codieren, dass es seinen Umriss anzeigt... auch wenn wir dieses [Border]-Image nur auf einer Seite anzeigen (z. B. border-image-bottom)?
Spielen Sie mit diesem einmaligen Angebot bei W3 (wenn Sie sich kein Codepen leisten können, lol).
http://www.w3schools.com/cssref/css3_pr_border-image.asp
Das ist Rand, nicht Umriss. Es gibt einen Unterschied.
Sie haben etwas Wichtiges übersehen. Der Umriss-Offset.
Warnung: Barrierefreiheits-Alarm!
Viele Web-Builder mögen die Outlines nicht und verstecken sie. Aber das Entfernen aller Outlines macht es für Tab-Benutzer unmöglich zu sehen, auf welchem Link sie sich befinden (Mausbenutzer können es sehen, indem sie mit dem Zeiger darüber fahren).
Die Richtlinie ist
http://www.w3.org/TR/WCAG20/#keyboard-operation (Web Content Accessibility Guidelines (WCAG) 2.0 / Guideline 2.1: Make all functionality available from a keyboard).
Glücklicherweise gibt es eine einfache Lösung, um die Outlines für Mausbenutzer zu verstecken und die Barrierefreiheit für Tab-Benutzer zu erhalten!
Siehe
http://www.456bereastreet.com/archive/200910/remove_the_outline_from_links_on_active_only/
Hallo, wie wende ich das auf die mobile Version meiner Website an? Ich verstehe, dass manche Leute keine Maus benutzen können, daher möchte ich es nicht auf die Desktop-Site anwenden. Wenn ich
in den CSS-Bereich eingebe, entfernt es nur den Fokusrand von der Desktop-Site, lässt aber den Fokusrand auf Tablet und Mobilgeräten bestehen. Das passiert bei einem Dropdown-Menü.
{ outline:none;}
outlinefolgt jetzt derborder-radius-Form in Firefox seit Version 88: https://hacks.mozilla.org/2021/04/never-too-late-for-firefox-88/outlinefolgt jetzt derborder-radius-Form in der neuesten Chrome-Version. Yay!