CSS Outline

 

 

 

CSS 개요 속성은 외곽선의 스타일, 색상 및 너비를 지정합니다.

 

윤곽선은 요소를 "눈에 띄게"만들기 위해 테두리 주위에 그려진 선입니다.

 

그러나 외곽선 특성은 테두리 특성과 다릅니다. 외곽선은 요소 치수의 일부가 아닙니다. 요소의 전체 너비와 높이는 외곽선의 너비에 영향을받지 않습니다.

 

 

 

Outline Style

 

 

outline-style 속성은 개요의 스타일을 지정합니다.

 

outline-style 속성은 다음 값 중 하나를 가질 수 있습니다.

 

 

dotted - 점선으로 된 윤곽선을 정의합니다.

dashed - 파선 테두리를 정의합니다.

solid - 솔리드 윤곽을 정의합니다.

double - 이중 윤곽선을 정의합니다.

groove - 3D 그루브 외곽선을 정의합니다. 효과는 윤곽선 색상 값에 따라 다릅니다.

ridge - 3D ridged outline을 정의합니다. 효과는 윤곽선 색상 값에 따라 다릅니다.

inset - 3D 인세 트 개요를 정의합니다. 효과는 윤곽선 색상 값에 따라 다릅니다.

outset - 3D 시작 윤곽선을 정의합니다. 효과는 윤곽선 색상 값에 따라 다릅니다.

none - 윤곽선을 정의하지 않습니다.

hidden - 숨겨진 외곽선을 정의합니다.

 

다음 예제는 먼저 각 <p> 요소 주위에 얇은 검정 테두리를 설정 한 다음 다른 외곽선 스타일 값을 보여줍니다.

 

 

Example

p {

    border: 1px solid black;

    outline-color: 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;}