CSS-개요

외곽선은 테두리와 매우 유사하지만 큰 차이점도 거의 없습니다.

윤곽선은 공간을 차지하지 않습니다.
윤곽선이 직사각형 일 필요는 없습니다.
윤곽선은 항상 모든면에서 동일합니다. 요소의 다른면에 대해 다른 값을 지정할 수 없습니다.

NOTE − IE 6 또는 Netscape 7에서는 개요 속성이 지원되지 않습니다.

CSS를 사용하여 다음과 같은 개요 속성을 설정할 수 있습니다.

그만큼 outline-width 속성은 외곽선의 너비를 설정하는 데 사용됩니다.
그만큼 outline-style 속성은 윤곽선의 선 스타일을 설정하는 데 사용됩니다.
그만큼 outline-color 속성은 외곽선의 색상을 설정하는 데 사용됩니다.
그만큼 outline property는 하나의 문에서 위의 세 가지 속성을 모두 설정하는 데 사용됩니다.

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>

다음 결과가 생성됩니다-

개요 스타일 속성

개요 스타일 속성을 지정하는 요소 주위에가는 라인의 스타일 (고체, 점선 또는 파선). 다음 값 중 하나를 취할 수 있습니다.

none− 국경 없음. (outline-width : 0;과 동일)
solid − 외곽선은 단일 실선입니다.
dotted − 외곽선은 일련의 점입니다.
dashed − 개요는 일련의 짧은 선입니다.
double − 외곽선은 두 개의 실선입니다.
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>

다음 결과가 생성됩니다-

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>

다음 결과가 생성됩니다-

개요 속성

개요 속성은 임의의 순서로하지만, 하나의 문에서 앞서 설명한 세 가지 속성의 값을 지정할 수 있습니다 약식 속성이다.

여기에 예가 있습니다-

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

다음 결과가 생성됩니다-