CSSのアウトラインは単なる境界線以上のものです
CSSのアウトラインプロパティは混乱するプロパティです。 あなたが最初にそれについて学ぶとき、どのように国境のプロパティから遠く離れているのかを理解するのは難しいです。 W3Cは、次のような違いがあると説明しています。
- アウトラインはスペースを取らない。
- 輪郭線は非長方形であってもよい。
アウトラインはスペースを取らない
この声明は、それ自体が混乱しています。 Webページ上のオブジェクトがWebページ上の領域を占有しないようにするにはどうすればよいですか？ しかし、あなたのウェブページがタマネギのようなものだと考えるならば、ページ上の各アイテムは別のアイテムの上に重ねて表示されるかもしれません。 アウトラインプロパティは、常に要素のボックスの上に配置されるため、スペースを占有しません。
アウトラインが要素の周りに配置されている場合、その要素がページ上でどのようにレイアウトされているかには影響しません。 要素のサイズや位置は変更されません。 要素にアウトラインを付けると、その要素のアウトラインがない場合と同じ量の領域が占有されます。 これは国境に当てはまらない。 エレメント上のボーダーがエレメントの外側の幅と高さに追加されます。 したがって、2ピクセルの境界線を持つ50ピクセル幅のイメージがある場合は、54ピクセル（各側面の境界に2ピクセル）を占有します。 2ピクセルの輪郭を持つ同じ画像は、ページ上でわずか50ピクセルの幅を占め、アウトラインは画像の外側の端に表示されます。
アウトラインが非長方形の場合があります
あなたが "涼しいと思うようになる前に、今、私はサークルを描くことができます！" もう一度考えて。 このステートメントは、あなたが考えるかもしれないものとは異なる意味を持っています。 要素に罫線を置くと、ブラウザは要素を1つの巨大な長方形の箱のように解釈します。 ボックスが複数の行にまたがって分割された場合、ボックスは閉じられていないため、ブラウザはエッジを開いたままにします。 それは、ブラウザが無限に広い画面を持つ境界線を見ているかのようです。境界線が連続した1つの長方形になるのに十分な幅です。
対照的に、輪郭特性はエッジを考慮に入れている。 アウトライン要素が複数の行にまたがる場合、アウトラインは行末で閉じられ、次の行で再び開きます。 可能であれば、アウトラインは完全に接続されたままになり、長方形以外の形状になります。
アウトラインプロパティの使用
アウトラインプロパティの最適な使い方の1つは、検索用語を強調表示することです。 多くのサイトでは背景色を使用していますが、アウトラインプロパティを使用することもできますし、余白をページに追加する心配もありません。
outline-colorプロパティは、アウトラインカラーを現在のバックグラウンドの逆にする用語 "invert"を受け入れます。 これにより、どの色が使用されているかを知る必要なく動的Webページ上の要素を強調表示することができます。
また、アウトラインプロパティを使用してアクティブなリンクの点線を削除することもできます。 CSS-Tricksのこの記事では、点線のアウトラインを削除する方法を示します。