outline-width
CSS outline-width
속성은 요소 외곽선의 두께를 설정합니다. 외곽선은 요소의 테두리 바깥에 그려지는 선입니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
외곽선 외형을 설정할 땐 outline
단축 속성을 사용하는게 편리한 상황이 많습니다.
구문
/* 키워드 값 */
outline-width: thin;
outline-width: medium;
outline-width: thick;
/* <length> 값 */
outline-width: 1px;
outline-width: 0.1em;
/* 전역 값 */
outline-width: inherit;
outline-width
속성은 다음 값 중 하나를 사용해 지정합니다.
값
<length>
- 외곽선의 두께를
<length>
로 설정합니다. thin
- 사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통
1px
입니다. medium
- 사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통
3px
입니다. thick
- 사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통
5px
입니다.
형식 정의
초기값 | medium |
---|---|
적용대상 | all elements |
상속 | no |
Computed value | an absolute length; if the keyword none is specified, the computed value is 0 |
Animation type | a length |
형식 구문
예제
요소의 외곽선 두께 설정하기
HTML
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>
CSS
span {
outline-style: solid;
display: inline-block;
margin: 20px;
}
#thin {
outline-width: thin;
}
#medium {
outline-width: medium;
}
#thick {
outline-width: thick;
}
#twopixels {
outline-width: 2px;
}
#oneex {
outline-width: 1ex;
}
#em {
outline-width: 1.2em;
}
결과
명세
Specification | Status | Comment |
---|---|---|
CSS Basic User Interface Module Level 3 The definition of 'outline-width' in that specification. |
Recommendation | No change. |
CSS Level 2 (Revision 1) The definition of 'outline-width' in that specification. |
Recommendation | Initial definition. |
브라우저 호환성
BCD tables only load in the browser