CSSアウトラインの使い方を詳しく解説

前の言葉

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

アウトライン スタイル

適用対象: すべての要素

継承: なし

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

outline-width

値:細い | 中 | 太い | 輪郭の色

境界線とは異なり、輪郭の色には反転というキーワードがあり、輪郭が異なる背景色で表示されるようになります。しかし、実際には、invert キーワードは IE ブラウザーでのみサポートされます。

outline-color

値: 初期値:反転(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 の投影も丸められます

<p class="show">测试内容</p>

.show{
    margin: 50px;
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius : 1px;
    box-shadow: 0 0 0 30px lightblue;
}

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