CSSの概要ログイン

CSSの概要

アウトラインは枠線の外側にあるため、枠線のように文書の流れに影響を与えることはありません。つまり、文書の流れに影響を与えることはありません。再表示される。

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


アウトラインのスタイル

境界線と同様に、アウトラインの最も基本的な側面はスタイルです。アウトラインにスタイルがなければ、アウトラインはまったく存在しません。境界線とは異なり、値は 1 つ少なくなります

値: なし | 溝の内側 |すべての要素

継承: なし

Outline-width

境界線と同様に、outline-width は負の値にすることも、パーセンテージ値として指定することもできません outline-width 値: Thin | Medium | Thick | < ;length> 継承

適用対象:全要素

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

境界線とは異なり、輪郭の色には輪郭を反転するためのキーワード invert があります。これは、輪郭が位置するピクセルが完全に反転され、輪郭が異なる背景色で表示されることを意味します。しかし、実際には、invert キーワードは IE ブラウザーでのみサポートされます。

outline-color

値: <color> 初期値: invert(IE) 、前景色 (他のブラウザ)

適用対象: すべての要素

継承: なし

輪郭オフセット

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

【注意】IEブラウザは

outline-offset

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

値: length | 継承

初期値: 0

適用対象: すべての要素

継承: なし

アウトラインの省略形

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

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

outline

Value: [<outline- color> || <outline-style> || <outline-width>] 初期値: なし

継承: なし

次のセクション

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮廓测试</title> <style> .show { margin: 50px; width: 100px; height: 100px; background-color: pink; border-radius : 1px; box-shadow: 0 0 0 30px lightblue; } </style> </head> <body> <div class="show">测试内容</div> </body> </html>
コースウェア