Tool Hub

Focus-Ring-Tester

Outline · Box-Shadow Fokus-Stilvorschau

CSS-Selektor

Nur Tastatur (empfohlen)

Klicken Sie auf einen Schieberegler unten oder drücken Sie Tab, um die Fokusanzeige anzuzeigen.

CSS
:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

Wie man es benutzt

  1. Passen Sie Outline-Breite, -Offset und -Farbe mit den numerischen Eingaben und der Farbauswahl an.
  2. Wählen Sie Outline-Stil: solid, dashed oder dotted.
  3. Aktivieren Sie optional box-shadow und stellen Sie seinen Spread und seine Farbe für einen Dual-Ring-Effekt ein.
  4. Tasten Sie in die Vorschau-Schaltfläche oder Eingabe, um den Focus-Ring Live gerendert zu sehen.
  5. Kopieren Sie den generierten CSS, um ihn in Ihrem eigenen Stylesheet zu verwenden.

Beispiele

  • Das Setzen von Breite 3px, Offset 2px, Farbe #0066FF, Stil solid erzeugt outline: 3px solid #0066FF; outline-offset: 2px; sichtbar auf der Vorschau-Schaltfläche wenn fokussiert.
  • Das Aktivieren von box-shadow mit Spread 4px und Farbe rgba(0,102,255,0.4) fügt einen weichen Glow-Ring um das Outline herum.

Ergebnisse vor dem Produktiveinsatz prüfen. Keine Gewährleistung — siehe Nutzungsbedingungen.