CSS-概要

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

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

NOTE −アウトラインプロパティは、IE6またはNetscape7ではサポートされていません。

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

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

アウトライン幅プロパティ

輪郭線幅のプロパティは、ボックスに追加する輪郭線の幅を指定します。その値は、border-width属性と同様に、lengthまたはthin、medium、thickのいずれかの値である必要があります。

幅がゼロピクセルの場合、輪郭がないことを意味します。

ここに例があります-

<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>

次の結果が得られます-

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

アウトラインスタイルのプロパティで指定要素を一周するラインのスタイル（実線、点線、または破線）。次のいずれかの値を取ることができます-

none−国境なし。（outline-width：0;に相当）
solid −アウトラインは1本の実線です。
dotted −アウトラインは一連のドットです。
dashed −アウトラインは一連の短い線です。
double −輪郭は2本の実線です。
groove −アウトラインはページに刻まれているように見えます。
ridge −輪郭は溝の反対に見えます。
inset −アウトラインは、ボックスがページに埋め込まれているように見せます。
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>

次の結果が得られます-

アウトラインカラープロパティ

アウトライン色のプロパティを使用すると、輪郭線の色を指定することができます。その値は、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>

次の結果が得られます-

アウトラインプロパティ

アウトラインプロパティは、任意の順序ではなく、単一のステートメントでは先に述べた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>

次の結果が得られます-