CSSのアウトラインスタイルについて

outline (アウトライン) は、要素の周囲に引かれた線で、境界線の外側に位置し、要素を強調表示できます。アウトライン属性は、要素の周囲にアウトラインを設定します。

必ず outline-color 属性の前に outline-style 属性を宣言してください。要素の輪郭の色は、輪郭を取得した後にのみ変更できます。

可能な値の説明:

なし デフォルト。アウトラインを定義しません。
dotted は、ドットの輪郭を定義します。
破線は、破線のアウトラインを定義します。
ソリッドは、ソリッドのアウトラインを定義します。
double は二重線のアウトラインを定義します。二重線の幅は outline-width の値と同じです。
グルーブは 3D グルーブ プロファイルを定義します。この効果は、outline-color 値によって異なります。
リッジは 3D 溝プロファイルを定義します。この効果は、outline-color 値によって異なります。
インセットは 3D 凹面エッジ輪郭を定義します。この効果は、outline-color 値によって異なります。
アウトセットは 3D 凸エッジのアウトラインを定義します。この効果は、outline-color 値によって異なります。
継承は、アウトラインスタイル設定を親要素から継承する必要があることを指定します。

アウトラインは正確に何を制御しますか?

a タグに注目すると、a タグの領域の周囲に点線のボックスが表示されます。このボックスは幅を占有しないという点で境界線とは異なります。フォーカスを解除すると点線枠は自然に消えます。 Aoyou、Firefox、または IE のいくつかのバージョンを通じてそれを確認できます。ただし、Safari、Opera、Goole ブラウザではこのエフェクトがサポートされていないため、表示することができません。

ほとんどの場合、これは役に立たない効果なので、a タグに outline:none を設定します。残念ながら、これは IE6、7、および Aoyou 実装済みブラウザーでのみ使用できます。 ff と ie8 は、outline:none を追加した後、フォーカスされている点線枠をキャンセルします。

この点線のボックスをキャンセルするにはどうすればよいですか?よく使われる方法は以下の3つです。

1: aタグにjsコントロールを追加する この時、aタグには当然ながら点線枠は付きません。 。

<a href="#" onfocus="this.blur();">测试</a>

ここで、フォーカスが設定されると、blur() がトリガーされて、フォーカスが強制的にキャンセルされます。当然のことながら、それは実証済みです。

2: a タグ内に、span や var などの他のタグをネストし、ネストされたタグにコンテンツを入れます。このとき、このリンクをクリックするとaのサブタグにフォーカスが当たり、当然aタグにはフォーカスされないので、この問題は回避できます。

3: タグをリンクとして使用する代わりに、他のタグを使用し、js を使用してホバー効果を作成し、CSS に cursour:pointer を追加して、マウス ポインターを設定して手を小さくします。ユーザーにリンクのような錯覚を与えます。クリック時のページジャンプなどにはjsを使用します。最大の欠点は、最初の 2 つよりもはるかに使いやすさが劣ることです。

以上がCSSのアウトラインスタイルについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。