CSSのアウトラインスタイル属性の使い方-CSSチュートリアル-php.cn

CSSのアウトラインスタイル属性の使い方

青灯夜游

リリース： 2019-05-28 10:20:52

オリジナル

2462 人が閲覧しました

アウトラインは、要素の周囲に描かれた線であり、境界線の端の外側に位置します。アウトラインスタイル属性は、要素のアウトライン全体のスタイルを設定するために使用されます。この属性の値を none に設定することはできません。そうしないと、アウトラインが表示されません。

CSSのアウトラインスタイル属性の使い方

#CSS アウトラインスタイル属性を使用するにはどうすればよいですか?

outline-style プロパティは、要素のアウトライン全体のスタイルを設定するために使用されます。スタイルを none にすることはできません。それ以外の場合、アウトラインは表示されません。

構文:

1	`outline-style : none \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset \| inherit;`

ログイン後にコピー

属性値:

● なし: デフォルト。アウトラインを定義しません。

# 点線: 点線のアウトラインを定義します。

# 破線: 破線のアウトラインを定義します。

# 実線: 実線の輪郭を定義します。

# 二重: 二重線のアウトラインを定義します。二重線の幅は、outline-width の値と同じです。

#● 溝: 3D 溝プロファイルを定義します。この効果は、outline-color 値によって異なります。

## ● リッジ: 3D 溝プロファイルを定義します。この効果は、outline-color 値によって異なります。

##● inset: 3D 凹面エッジプロファイルを定義します。この効果は、outline-color 値によって異なります。

# アウトセット: 3D 凸状エッジのアウトラインを定義します。この効果は、outline-color 値によって異なります。

# 継承: アウトラインスタイル設定を親要素から継承するように指定します。

注:

この要素は、アウトラインを取得した後にのみアウトラインの色を変更できるため、outline-style 属性は常に、outline-color 属性の前に宣言する必要があります。

注:

outline は要素の周囲のマージンですが、別の border 属性から取得されます。アウトラインは要素の寸法の一部ではないため、要素の幅と高さのプロパティにはアウトラインの幅は含まれません。輪郭はスペースをとらないため、必ずしも長方形である必要はありません。

css アウトラインスタイル属性の例

<!DOCTYPE>
<html>
 
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            p {
                border: 1px solid red;
            }
             
            p.dotted {
                outline-style: dotted;
            }
             
            p.dashed {
                outline-style: dashed;
            }
             
            p.solid {
                outline-style: solid;
            }
             
            p.double {
                outline-style: double;
            }
             
            p.groove {
                outline-style: groove;
            }
             
            p.ridge {
                outline-style: ridge;
            }
             
            p.inset {
                outline-style: inset;
            }
             
            p.outset {
                outline-style: outset;
            }
        </style>
    </head>
 
    <body>
 
        <p class="dotted">点线轮廓</p>
        <p class="dashed">虚线轮廓</p>
        <p class="solid">实线轮廓</p>
        <p class="double">双线轮廓</p>
        <p class="groove">凹槽轮廓</p>
        <p class="ridge">垄状轮廓</p>
        <p class="inset">嵌入轮廓</p>
        <p class="outset">外凸轮廓</p>
        <p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>
    </body>
 
</html>