아웃라인은 테두리와 마찬가지로 문서 흐름에 참여하지 않습니다. 따라서 아웃라인이 나타나거나 사라지더라도 문서 흐름에 영향을 미치지 않습니다. 다시 표시됩니다.
윤곽선은 요소 주위에 그려지는 선으로, 테두리 가장자리 외부에 위치하며 요소를 강조할 수 있습니다.
윤곽선 스타일
테두리와 마찬가지로 아웃라인이 가장 기본적인 측면은 스타일입니다. 아웃라인에 스타일이 없으면 아웃라인은 전혀 존재하지 않습니다. 테두리와는 다르게 숨겨진 값
값: 없음 | 점선 | 이중 홈 | 상속 |
초기값: 없음
적용 대상: 모든 요소
상속: 없음 >
테두리와 유사하게, 윤곽선 너비는 음수가 될 수 없으며 백분율로 지정할 수도 없습니다. 값
outline-width
값: 가늘게 | 중간 | 두꺼운 | <길이> 상속 적용 대상: 요소 상속: 없음
[참고] 윤곽선 스타일이 없음이면 윤곽선 너비가 계산됩니다. 값은 0
윤곽선 색상
테두리와 다르게 외곽선 색상에는 외곽선을 반전시키는 invert 키워드가 있습니다. 이는 외곽선이 위치한 픽셀을 완전히 반전시켜 외곽선이 다른 배경색으로 표시되도록 하는 것을 의미합니다. 하지만 실제로 invert 키워드는 IE 브라우저에서만 지원됩니다. 다른 브라우저의 윤곽선 색상은 요소 자체의 전경색
outline-color
값: <color> invert | 상속
초기값: invert(IE), 전경색(다른 브라우저)
적용 대상: 모든 요소 상속: 없음
윤곽 오프셋
윤곽 오프셋은 윤곽의 오프셋 위치 값을 정의하는 데 사용됩니다. 매개변수 값이 양수이면 외곽선이 바깥쪽으로 이동한다는 의미이고, 매개변수 값이 음수이면 외곽선이 안쪽으로 이동한다는 의미입니다.
[참고] IE 브라우저는 <🎜를 지원하지 않습니다. >
outline -offset
값: 길이 | 상속
초기 값: 0
적용 대상: 모든 요소
상속: 없음
윤곽선 약어
윤곽선 윤곽선은 테두리 스타일의 테두리 속성과 유사하여 윤곽선 스타일, 너비, 색상을 한 번에 설정할 수 있습니다. 주어진 윤곽선은 일정한 스타일, 너비 및 색상을 채택해야 하기 때문에 윤곽선에 대한 유일한 단축 속성은 윤곽선입니다. 아웃라인에는 outline-top, outline-right 속성이 없습니다
[참고] 아웃라인에는 아웃라인-오프셋이 포함되지 않으며, 아웃라인-오프셋을 별도로 설정해야 합니다
outline
값: [<outline-style> || <outline-width>] | 상속
적용됨 to : 모든 요소
상속: 없음
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮廓案例</title>
<style>
p {border:1px solid yellow;}
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;}
</style>
</head>
<body>
<p class="dotted">点线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓</p>
<p class="ridge">垄状轮廓</p>
<p class="inset">嵌入轮廓</p>
<p class="outset">外凸轮廓</p>
</body>
</html>
다음 섹션