CSS-アウトライン

アウトラインは境界線に非常に似ていますが、大きな違いもほとんどありません-

アウトラインはスペースを占有しません。
アウトラインは長方形である必要はありません。
アウトラインは常にすべての側面で同じです。要素の異なる側面に異なる値を指定することはできません。

注-アウトラインプロパティは、IE 6またはNetscape 7ではサポートされていません。

CSSを使用して、次のアウトラインプロパティを設定できます。

outline-width プロパティは、アウトラインの幅を設定するために使用されます。
outline-style プロパティは、アウトラインの線のスタイルを設定するために使用されます。
outline-color プロパティは、アウトラインの色を設定するために使用されます。
outline プロパティは、上記の3つのプロパティすべてを1つのステートメントに設定するために使用されます。

outline-widthプロパティ

_outline-width_プロパティは、ボックスに追加されるアウトラインの幅を指定します。その値は、border-width属性と同様に、長さ、または_thin、medium、thick、_のいずれかの値である必要があります。

幅0ピクセルは、アウトラインがないことを意味します。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br/>

      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br/>

      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

それは次の結果を生成します-

アウトラインスタイルのプロパティ

_outline-style_プロパティは、要素を囲む線のスタイル（実線、点線、または破線）を指定します。それは次の値のいずれかを取ることができます-

none -ボーダーなし。（outline-width：0と同等;）
solid -アウトラインは単一の実線です。
dotted -アウトラインは一連のドットです。
破線-アウトラインは一連の短い線です。
double -アウトラインは2本の実線です。
groove -アウトラインはページに刻まれているように見えます。
ridge -アウトラインは溝の反対に見えます。
インセット-アウトラインは、ボックスがページに埋め込まれているように見えます。
outset -アウトラインは、キャンバスから出てきたようにボックスを表示します。
hidden -なしと同じ。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br/>

      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br/>

      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

それは次の結果を生成します-

outline-colorプロパティ

_outline-color_プロパティを使用すると、アウトラインの色を指定できます。その値は、colorおよびborder-colorプロパティと同様に、色名、16進数の色、またはRGB値のいずれかでなければなりません。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br/>

      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br/>

      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

それは次の結果を生成します-

アウトラインプロパティ

_outline_プロパティは、前述の3つのプロパティのいずれかの値を、単一のステートメント以外の任意の順序で指定できるようにする略記プロパティです。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br/>

      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br/>

      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

それは次の結果を生成します-

Css-outlines

CSS-アウトライン

outline-widthプロパティ

アウトラインスタイルのプロパティ

outline-colorプロパティ

アウトラインプロパティ

目次