[SS]borderとoutlineの違いを理解し、解決する

ホットスポットの検出

次はプロジェクトの進行中に発生した問題です.
border-bottomでは、プレースホルダの文字が軽く動いているのが見えます.

改善前コード

現在の実装方法は、次のとおりです.
枠線の太さ、スタイル、色を一度に指定します.

&:focus{
    border-bottom: 1.9px solid ${props => props.color};
}

原因分析

borderよりoutlineのほうが性能がいいです.
正確にはborder-widthで変更するとレイアウトを再描画する必要があるからです.
アウトラインとの違いをリストするのはこうです.

outline

のスペースは使用されません.常にelement boxの上にあるからです.他の要因と重なる問題が発生します

borderとは異なり、

角切り紙に造形を追加することはできません.

要素の寸法または位置には影響しません.(重複問題を除く)

border

の空間を占めています.

角切り紙に所望の造形を追加できます.

つまり.
borderは空間を占めている.
これは,周囲の要素を移動することによってlayout−paint−組合せ過程でlayoutに影響を及ぼすことを意味する.
ただし、border-widthを特性状態に応じて変換すると、レイアウトが毎回変更され、パフォーマンスに悪影響を及ぼす.

改善

これを改善するためには、ステータスに応じてwidthを変更するのはよくない選択です.
アウトラインではスタイルを正確に指定できないため、コードは以下の方法で改善できます.

border-bottom: 1.9px solid transparent;

&:focus{
    border-bottom-color: ${props => props.color};
}

基本状態の場合はwidth、style、colorを指定します.でも色は透明になります.
そして、あなたが望む状態に達したら、色を変えるだけです.
次のgifを見ると、ちょっと移動して気に入らない話題が消えている様子が見えます!

Webアクセスについてoutlineは?

outlineについてさらに理解した結果、アイデアがないことに気づいてnoneで削除しましたが、これではだめです.
キーボードで操作するユーザーに対して、フォーカスのアウトラインを提示しないのは不便です.
取り外さないで、サービスに合わせましょう.
outlineの色を多く使うと、色盲を区別しない可能性があるので、色だけで組み合わせるのは避けましょう.下線、style dottedなどと併用します.
もちろん、色弱者のためには背景色と区別できる色を選んだほうがいいです.