outline
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
시도해보기
구성 속성
outline
은 단축 속성으로서 다음의 하위 속성을 포함합니다.
구문
/* style */
outline: solid;
/* color | style */
outline: #f66 dashed;
/* style | width */
outline: inset thick;
/* color | style | width */
outline: green solid 3px;
/* 전역 값 */
outline: inherit;
outline: initial;
outline: unset;
outline
속성은 아래의 값 중 한 개에서 세 개를 사용해 지정할 수 있으며 순서는 상관하지 않습니다.
참고 :
많은 요소의 외곽선은 스타일을 지정하지 않을 경우 보이지 않습니다. 스타일 기본값이 none
이기 때문인데, 주목할만한 예외는 <input>
요소로 브라우저의 기본 스타일이 적용됩니다.
값
<'outline-color'>
-
외곽선의 색을 설정합니다. 누락 시 기본값은
currentcolor
입니다.outline-color
를 참고하세요. <'outline-style'>
-
외곽선의 스타일을 설정합니다. 누락 시 기본값은
none
입니다.outline-style
을 참고하세요. <'outline-width'>
-
외곽선의 두께를 설정합니다. 누락 시 기본값은
medium
입니다.outline-width
를 참고하세요.
설명
접근성 고려사항
outline
에 0
또는 none
값을 지정하면 브라우저의 기본 포커스 스타일이 사라집니다. 만약 어떤 요소가 상호작용 가능하다면 반드시 시각으로 포커스 여부를 나타낼 수 있어야 합니다. 기본 포커스 스타일을 제거한 경우 다른 뚜렷한 대안을 제공하세요.
형식 정의
초기값 | as each of the properties of the shorthand:
|
---|---|
적용대상 | all elements |
상속 | no |
계산 값 | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
형식 구문
outline =
<'outline-width'> ||
<'outline-style'> ||
<'outline-color'>
<outline-width> =
<line-width>
<outline-style> =
auto |
<outline-line-style>
<outline-color> =
auto |
[ <color> | <image-1D> ]
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
예제
외곽선으로 포커스 스타일 설정
HTML
<a href="#">This link has a special focus style.</a>
CSS
a {
border: 1px solid;
border-radius: 3px;
display: inline-block;
margin: 10px;
padding: 5px;
}
a:focus {
outline: 4px dotted #e73;
outline-offset: 4px;
background: #ffa;
}
결과
명세
Specification |
---|
CSS Basic User Interface Module Level 4 # outline |
브라우저 호환성
BCD tables only load in the browser