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월.
CSS outline-width 속성은 요소 외곽선의 두께를 설정합니다. 외곽선은 요소의 테두리 바깥에 그려지는 선입니다.
시도해 보기
outline-width: 12px; outline-width: thin; outline-width: medium; outline-width: thick; <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> 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 keyword none is specified, the computed value is 0 |
| Animation type | a length |
형식 구문
outline-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
예제
요소의 외곽선 두께 설정하기
HTML
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
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 |