outline-offset 속성

outline-offset 속성은 공간을 차지하지 않는 외곽선의 오프셋을 설정합니다. 속성 값은 백분율을 제외한 모든 크기 단위를 사용할 수 있습니다. 기본값은 0입니다. 양수 값은 요소의 바깥쪽으로 아웃라인을 이동시키고, 음수 값은 안쪽으로 이동시킵니다.

구문

선택자 {
	outline-offset: 값;
}

예제 . 양수 값

아웃라인이 요소(배경색으로 강조됨)로부터 떨어져 있습니다:

<div id="elem"></div>

#elem {
	outline-offset: 5px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

예제 . 음수 값

아웃라인이 요소 내부에 위치합니다:

<div id="elem"></div>

#elem {
	outline-offset: -10px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

예제 . 음수 outline 값 + border

다음과 같은 흥미로운 효과를 만들 수 있습니다(경계 사이의 흰색 간격 두께에 주목하세요, 10px이며 14가 아닙니다. 왜냐하면 outline의 4px 두께가 그 부분을 차지했기 때문입니다):

<div id="elem"></div>

#elem {
	outline-offset: -14px;
	outline: 4px solid green;
	border: 4px solid red;
	width: 300px;
	height: 100px;
}

같이 보기

아웃라인의 두께를 설정하는 outline-width 속성,
아웃라인의 스타일을 설정하는 outline-style 속성,
아웃라인의 색상을 설정하는 outline-color 속성,
아웃라인을 위한 단축 속성인 outline 속성,