Focus Ring テスター

使い方

1. 数値入力とカラーピッカーを使用して、アウトライン幅、オフセット、色を調整します。
2. アウトラインスタイルを選択: 実線、破線、または点線。
3. オプションで box-shadow を有効にし、スプレッドと色を設定してデュアルリングエフェクトを実現します。
4. プレビューボタンまたは入力にタブで焦点を当てるか、フォーカスリングをリアルタイムでレンダリング します。
5. 生成された CSS をコピーして自分のスタイルシートで使用します。

例

• 幅 3px、オフセット 2px、色 #0066FF、スタイル実線を設定すると、outline: 3px solid #0066FF; outline-offset: 2px; がプレビューボタンにフォーカスしたときに表示されます。
• box-shadow を有効にし、スプレッド 4px、色 rgba(0,102,255,0.4) を設定すると、アウトラインの周りにソフトグロー リングが追加されます。