Focus Ring 測試器

Outline・box-shadow 焦點樣式預覽

Outline width (px)

Outline offset (px)

Outline color

CSS 選擇器

:focus-visible

:focus

僅鍵盤(建議)

solid

dashed

dotted

Add box-shadow ring

點擊下方的控制項或按 Tab 鍵預覽焦點環樣式。

CSS

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

使用方法

Adjust outline width, offset, and color using the numeric inputs and color picker。
Choose outline style: solid, dashed, or dotted。
Optionally enable box-shadow and set its spread and color for a dual-ring effect。
Tab into the preview button or input to see the focus ring rendered live。
Copy the generated CSS to use in your own stylesheet。

範例

Setting width 3px, offset 2px, color #0066FF, style solid produces outline: 3px solid #0066FF; outline-offset: 2px; visible on the preview button when focused。
Enabling box-shadow with spread 4px and color rgba(0,102,255,0.4) adds a soft glow ring around the outline。

生產環境使用前請驗證輸出。無擔保 — 參見條款.