outline-style
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
시도해 보기
outline-style: none;outline-style: dotted;outline-style: solid;outline-style: groove;outline-style: inset;<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-style: auto;outline-style: none;outline-style: dotted;outline-style: dashed;outline-style: solid;outline-style: double;outline-style: groove;outline-style: ridge;outline-style: inset;outline-style: outset;/* 전역 값 */outline-style: inherit;outline-style: initial;outline-style: unset;outline-style 속성은 다음 값 중 하나를 사용해 지정합니다.
값
auto사용자 에이전트가 사용자 지정 외곽선을 그릴 수 있도록 허용합니다.
none외곽선을 제거합니다.
outline-width가0입니다.dotted외곽선을 점 여러 개로 그립니다.
dashed외곽선을 짧은 선 여러 개로 그립니다.
solid외곽선을 하나의 선으로 그립니다.
double외곽선을 두 개의 선으로 그립니다.
outline-width는 두 선과 그 사이의 간격을 합친 값입니다.groove외곽선을 마치 파낸 것처럼 그립니다.
ridgegroove의 반대입니다. 외곽선을 마치 튀어나온 것처럼 그립니다.inset요소가 페이지 안에 박힌 것처럼 외곽선을 그립니다.
outsetinset의 반대입니다. 요소가 페이지 밖으로 나온 것처럼 그립니다.
형식 정의
| 초기값 | none |
|---|---|
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | by computed value type |
형식 구문
outline-style =
auto|
<outline-line-style>
예제
외곽선 스타일을auto로 설정하기
auto 값은 사용자 지정 스타일을 의미합니다. "일반적으로 플랫폼 기본 사용자 인터페이스 스타일이거나, CSS에서 나타낼 수 있는 것보다 더 풍부한 스타일 (예컨대 둥근 꼭짓점에 바깥쪽 픽셀은 반투명하여 빛나는 것처럼 보이는 외곽선)입니다."
HTML
html
<div> <p>Outline Demo</p></div>CSS
css
.auto { outline-style: auto; /* same result as "outline: auto" */}/* To make the Demo clearer */* { outline-width: 10px; padding: 15px;}결과
외곽선 스타일을dashed,dotted로 설정하기
HTML
html
<div> <div> <p>Outline Demo</p> </div></div>CSS
css
.dotted { outline-style: dotted; /* same result as "outline: dotted" */}.dashed { outline-style: dashed;}/* To make the Demo clearer */* { outline-width: 10px; padding: 15px;}결과
외곽선 스타일을solid,double로 설정하기
HTML
html
<div> <div> <p>Outline Demo</p> </div></div>CSS
css
.solid { outline-style: solid;}.double { outline-style: double;}/* To make the Demo clearer */* { outline-width: 10px; padding: 15px;}결과
외곽선 스타일을groove,ridge로 설정하기
HTML
html
<div> <div> <p>Outline Demo</p> </div></div>CSS
css
.groove { outline-style: groove;}.ridge { outline-style: ridge;}/* To make the Demo clearer */* { outline-width: 10px; padding: 15px;}결과
외곽선 스타일을 inset, outset으로 설정하기
HTML
html
<div> <div> <p>Outline Demo</p> </div></div>CSS
css
.inset { outline-style: inset;}.outset { outline-style: outset;}/* To make the Demo clearer */* { outline-width: 10px; padding: 15px;}결과
명세
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-style |