CSS 개요 스타일 속성

예시

윤곽선의 스타일을 설정합니다.

div {outline-style: dotted;}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

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

outline-style속성은 윤곽선의 스타일을 지정합니다 .

기본값:	없음
상속:	아니요
애니메이션 가능:	아니요. 애니메이션 가능 에 대해 읽기
버전:	CSS2
자바스크립트 구문:	개체 .style.outlineStyle="대시"

팁 및 참고 사항

참고: 외곽선은 테두리 와 다릅니다 ! 테두리와 달리 윤곽선은 요소의 테두리 외부에 그려지며 다른 내용과 겹칠 수 있습니다. 또한 윤곽선은 요소 차원의 일부가 아닙니다. 요소의 전체 너비와 높이는 윤곽선 너비의 영향을 받지 않습니다.

브라우저 지원

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Property
outline-style	1.0	8.0	1.5	1.2	7.0

CSS 구문

속성 값

Value	Description	Play it
none	Specifies no outline. This is default
hidden	Specifies a hidden outline
dotted	Specifies a dotted outline
dashed	Specifies a dashed outline
solid	Specifies a solid outline
double	Specifies a double outliner
groove	Specifies a 3D grooved outline. The effect depends on the outline-color value
ridge	Specifies a 3D ridged outline. The effect depends on the outline-color value
inset	Specifies a 3D inset outline. The effect depends on the outline-color value
outset	Specifies a 3D outset outline. The effect depends on the outline-color value
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

더 많은 예

예시

점선 개요:

div {outline-style: dashed;}

예시

확실한 개요:

div {outline-style: solid;}

예시

이중 개요:

div {outline-style: double;}

예시

그루브 개요:

div {
    outline-style: groove;
    outline-color: coral;
    outline-width: 7px;
}

예시

능선 개요:

div {
    outline-style: ridge;
    outline-color: coral;
    outline-width: 7px;
}

예시

삽입 개요:

div {
    outline-style: inset;
    outline-color: coral;
    outline-width: 7px;
}

예시

서두 개요:

div {
    outline-style: outset;
    outline-color: coral;
    outline-width: 7px;
}

예시

다른 값을 사용하여 윤곽선 스타일을 설정합니다.

p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}

CSS 참조

CSS Properties