css_html/css_WEB-ITnose でのアウトラインの使用

CSS のアウトライン属性は、要素の周囲に引かれる線であり、境界線の外側に位置し、要素を強調表示できます。

例: ブラウザーで、マウスをクリックするか Tab キーを使用してリンクまたはラジオにフォーカスを置くと、要素は輪郭の点線のボックスで囲まれます。この輪郭の点線のボックスが輪郭です。

1. アウトラインでは次の属性を順番に設定できます

outline-color: 要素のアウトラインの色を設定します。その値は border-color と同様です。アウトラインスタイルが none でない場合にのみ有効です。デフォルトは透明です。

outline-style: 要素のアウトラインの形式を設定します。その値は border-style と似ていますが、非表示の値はありません。デフォルトはなし、つまりアウトラインなしです。

outline-width: 要素のアウトラインの幅を設定します。その値は border-width に似ています。アウトラインスタイルが none でない場合にのみ有効です。

どちらの値も設定しなくても問題ありません

2. アウトラインとボーダーの違い

1. アウトラインはスペースをとらず、余分な幅や高さを追加しません
2. アウトラインは長方形でなくても構いません

3. アウトラインの階層順序

1 . アウトライン ブロックレベルの要素では、フォーマットのコンテキストによってプレゼンテーションが異なります。インライン要素は上記のコンテンツを上書きできます。

2. 通常の状況では、アウトラインは通常、前面を覆う背面の順序で表示されます (同じ状況では、ドキュメント フローにフロートが存在しないか、すべてがフローティングになっているようなもので、位置が異なります) z-index の値はカウントされません)

3. ページにフローティング要素がある場合、最初にフローティング要素のアウトラインが表示され、次に通常のドキュメント フローのアウトラインが表示されます (フローティング要素のアウトライン)

4. ページに位置決め要素 (相対、絶対、固定は含まれません) がある場合、フローティング要素を表示した後、通常のドキュメント フローを表示します。 Position 要素 (z-index が設定されていない場合、これを設定することはブラウザが他のコマンドを実行することと同じです) もちろん、positioned 要素は z を使用できます。 -index 属性は要素を前後に移動しますが、ここで説明しているのはz-indexを設定せずにデフォルトのブラウザでアウトラインを表示します。

参考：CSSでのアウトライン http://www.studyofnet.com/news/995.html