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.