This page was translated from English by the community.Learn more and join the MDN Web Docs community.
outline-width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
CSSoutline-width 속성은 요소 외곽선의 두께를 설정합니다. 외곽선은 요소의테두리 바깥에 그려지는 선입니다.
시도해 보기
outline-width: 12px;outline-width: thin;outline-width: medium;outline-width: thick;<section> <div> This is a box with an outline around it. </div></section>#example-element { outline: 0.75em solid; padding: 0.75em; width: 80%; height: 100px;}외곽선 외형을 설정할 땐outline 단축 속성을 사용하는게 편리한 상황이 많습니다.
구문
css
/* 키워드 값 */outline-width: thin;outline-width: medium;outline-width: thick;/* <length> 값 */outline-width: 1px;outline-width: 0.1em;/* 전역 값 */outline-width: inherit;outline-width 속성은 다음 값 중 하나를 사용해 지정합니다.
값
형식 정의
| 초기값 | medium |
|---|---|
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | an absolute length; if the keywordnone is specified, the computed value is0 |
| Animation type | alength |
형식 구문
outline-width =
<line-width>
<line-width> =
<length [0,∞]>|
thin|
medium|
thick
예제
요소의 외곽선 두께 설정하기
HTML
html
<span>thin</span><span>medium</span><span>thick</span><span>2px</span><span>1ex</span><span>1.2em</span>CSS
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 |
|---|
| CSS Basic User Interface Module Level 4 # outline-width |