CSS轮廓outline_html/css_WEB-ITnose

× カタログ [1] アウトラインのスタイル [2] アウトラインの幅 [3] アウトラインの色 [4] アウトラインのオフセット [5] 複合属性 [6] 共通のアプリケーション

前述したとおり

アウトラインは境界にあります境界線 外部的には、境界線のようにドキュメント フローに関与しないため、アウトラインの表示または非表示はドキュメント フローに影響を与えません。つまり、ドキュメントが再表示されることはありません。アウトラインを使用すると、ブラウザは部分的なアウトラインを結合して、連続的ではあるが長方形ではない形状を作成できます。デフォルトでは、アウトラインは、要素がフォーカスを取得するかアクティブ化されたときにのみレンダリングされる動的スタイルです

[注意] IE7 ブラウザは

アウトライン スタイル

枠線と同様に、最も基本的な側面アウトラインはスタイルです。アウトラインにスタイルがない場合、境界線はまったく存在しません。境界線とは異なり、値は 1 つ減ります。すべての要素

継承: なし

Outline-width

境界線と同様に、outline-width は負の値にすることも、パーセンテージ値として指定することもできません

outline-width

値: Thin | Medium | Thick | < ;length> 継承

適用対象: すべての要素

継承: none

[注] アウトラインスタイルが none の場合、計算されたアウトライン幅は 0 になります

輪郭の色

境界線とは異なり、輪郭の色にはキーワード invert があり、輪郭が配置されているピクセルの完全な逆色変換を表すため、輪郭がさまざまな背景色で表示されます。ただし、実際には、invert キーワードは IE ブラウザーでのみサポートされます。

outline-color

値: 初期値: invert(IE) , 前景色 (その他のブラウザ)

適用先: すべての要素

継承: なし

アウトラインオフセット

アウトラインオフセットは、アウトラインのオフセット位置を定義するために使用される値です。パラメータ値が正の値の場合は、アウトラインが外側にオフセットされることを意味し、パラメータ値が負の値の場合は、アウトラインが内側にオフセットされることを意味します

[注意] IE ブラウザは

outline-offset をサポートしていません。

値: length | 継承

初期値: 0

適用対象: すべての要素

継承: なし

Outline

アウトラインのアウトラインは、ボーダースタイルのボーダー属性と似ており、アウトラインのスタイル、幅、色を一度に設定します。特定のアウトラインは一定のスタイル、幅、色を採用する必要があるため、outline はアウトラインの唯一の省略表現プロパティです。アウトラインには、outline-topやoutline-rightなどの属性はありません

【注意】outlineにはoutline-offsetは含まれておらず、outline-offsetは別途設定する必要があります

outline

Value: [ || ] | 継承

適用対象: すべての要素

適用される

概要要素のボックス モデルのサイズには影響しますが、ページ レイアウトには影響しないため、アウトラインを使用して境界線の効果を模倣できます。しかし、丸い枠だと扱いが難しくなります。

Firefox ブラウザは、アウトラインの角丸を設定するためのプライベート プロパティ -moz-outline-radius をサポートしています。この属性に対応するjsの記述方法はMozOutlineRadius

他のブラウザの場合は、他の属性を使用して同様の効果を実現できます。 box-shadow 属性と border-radius 属性は同じ起源のものです。つまり、border-radius が丸められると、box-shadow の投影も丸くなります。