1.コンセプト
アウトラインは、要素を強調表示するために、境界線の外側にある要素の周囲に引かれる線です。
たとえば、通常、ブラウザでコンテンツを読むとき、マウスをクリックしてタグリンクまたは入力ラジオボタンにフォーカスすると、要素はアウトラインの点線ボックスで囲まれます。この輪郭の点線のボックスが輪郭です。
デフォルトでは、a タグをクリックするか、マウス クリック イベントを入力または追加すると、ブラウザーはアウトライン フレーム (クロムの下の青色) を残します。ただし、これらのデフォルトのアウトライン フレームは外観に影響を与え、フロントエンド ページの全体的な効果を損なうことがあるため、実際には維持したくありません。では、ブラウザのデフォルトのアウトライン フレームを削除したり、デフォルトのアウトライン フレームの効果を変更するにはどうすればよいでしょうか?
CSS のアウトライン プロパティは、要素のアウトラインのスタイル、色、幅を指定します。
アウトラインと境界線は非常によく似ていますが、両者には次のような違いがあります。
(1)要素の4方向の枠線のスタイル、幅、色は独立して設定できますが、要素の4方向の枠線の幅、スタイル、色は同じで設定できません個別に。
(2) 境界線の幅は要素のサイズに直接影響しますが、アウトラインはページ領域を占有せず、ページのレイアウトに影響を与えませんが、アウトラインはページ上の他の要素と重なり合います。
(3) 周囲の要素の音と重なるだけでなく、輪郭は周囲の要素に影響を与えません。
(4) 境界線は要素のサイズの一部ですが、輪郭は要素のサイズの一部ではありません。つまり、輪郭の幅がどんなに大きくても、要素のサイズは変わりません。
(5) 輪郭は長方形以外でも構いませんが、円形の輪郭を直接作成することはできません。
2. プロパティ
次のプロパティを使用して、要素のアウトラインを設定できます。
(1) アウトライン:すべてのアウトライン属性を 1 つのステートメントで設定します。アウトライン属性を使用すると、上記 3 つのアウトライン属性を同時に設定できます。
アウトラインカラーアウトラインスタイルアウトライン幅継承
●概略値は任意の順序で列挙でき、これらの値は無視することができます。
●JavaScriptの構文
object.style.outline=#0000FF点線細
(2) アウトラインの色:アウトラインの色を設定します。
色の名前16進数rgb番号反転継承
●注意：outline-style属性は必ずoutline-color属性より前に宣言してください。要素の輪郭の色は、輪郭を取得した後にのみ変更できます。
●outline-color属性は、要素のアウトライン全体のうち、表示される部分の色を設定します。
●JavaScriptの構文
object.style.outlineColor=#0000FF
(3) アウトラインスタイル:アウトラインのスタイルを設定します。
なし点線破線実線二重溝リッジインセットアウトセット継承
● アウトラインスタイル属性は、要素のアウトライン全体のスタイルを設定するために使用されます。スタイルを none にすることはできません。それ以外の場合、アウトラインは表示されません。
●注意：outline-style属性は必ずoutline-color属性より前に宣言してください。要素の輪郭の色は、輪郭を取得した後にのみ変更できます。
●等高線は場所を取らず、必ずしも長方形である必要はありません。
●JavaScriptの構文
object.style.outlineStyle=点線
(4) アウトライン幅:アウトラインの幅を設定します。
薄い中厚い長さ継承
●注意：outline-style属性は必ずoutline-width属性より前に宣言してください。要素の輪郭の色は、輪郭を取得した後にのみ変更できます。
●幅に負の数を指定することはできません。
●JavaScriptの構文
object.style.outlineWidth=thin
（5）outline-offset：輪郭と境界線との距離を設定します。
例：
<!DOCTYPEhtml><html><head><styletype=text/css>p{text-align:center;border:redsolidthin;outline:#00ff00dottedthick;}</style></head><body><p>Dotcpp誰でもプログラミングを学ぶことができます。</p></body></html>実行結果:
