요소의 테두리를 이미지를 이용하여 생성하는 관련 속성을 한번에 설정할 수 있는 속기 속성이다.
<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
border-image-outset
속성에 사용되는 타입이다.
테두리 이미지 영역이 테두리 상자를 넘어 확장되는 양을 지정한다. 기본 값은 0
이다.
[ <length [0,∞]> | <number [0,∞]> ]{1,4}
<length [0,∞]>
<number [0,∞]>
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0
(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height
속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height
속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%
를 나타낸다.
뷰포트 높이를 상대적으로 1%
높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%
를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1
초를 1000
으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
정수 또는 실수를 표현한다.
border-image-repeat
속성에 사용되는 타입이다.
테두리 이미지의 측면과 중간 부분에 대한 이미지의 크기가 조정되고 바둑판식으로 배열되는 방식을 지정한다. 기본 값은 stretch
이다.
[ stretch | repeat | round | space ]{1,2}
하나 이상 최대 2개까지 지정된 키워드를 설정한다. 첫 번째 지정된 키워드는 상단, 중간 및 하단 부분의 수평 스케일링 및 타일링에 적용된다. 두 번째로 지정된 키워드는 왼쪽, 중간 및 오른쪽 부분의 수직 스케일링 및 타일링에 적용된다. 두 번째는 키워드는 생략할 수 있으나 첫 번째 키워드와 동일한 것으로 처리된다.
변에 해당하는 이미지의 영역을 타일 처럼 요소의 테두리에 반복 배치한다. 변의 길이에 따라서 모서리쪽의 반복되는 이미지의 일부가 잘릴 수 있다.
repeat 와 동일한 방식으로 테두리에 이미지를 적용하나 변의 길이에 맞게 반복되는 영역을 적절하게 조절하여 잘리는 부분이 없도록 한다.
repeat 처럼 변의 길이에 맞게 이미지가 반복되지만 이미지의 영역을 조절하지 않고 반복되는 이미지와 이미지 사이에 공간을 두어 잘리는 부분 없이 변의 길이에 맞춘다.
이미지의 영역을 늘려 요소의 테두리로 적용한다.
border-image-slice
속성에 사용되는 타입이다.
이미지의 상하좌우 가장자리에서 내부 오프셋을 지정하여 4개의 모서리, 4개의 가장자리 및 중앙의 9개 영역을 나누는 값을 나타낸다. 기본 값은 100%
이다.
[<number [0,∞]> | <percentage [0,∞]>]{1,4} && fill?
<number [0,∞]>
<percentage [0,∞]>
fill
정수 또는 실수를 표현한다.
어떠한 기준으로 부터 백분율로 표현한다.
테두리 이미지의 중간 부분이 유지된다. 요소의 내부 영역에 배경 이미지처럼 포함하여 표시한다.
border-image-source
속성에 사용되는 타입이다.
테두리 이미지를 사용할 리소스를 설정한다. 기본 값은 none
이다.
none | <image>
2차원 이미지를 나타낸다.
<url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>
<url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.
현재 image()
는 지원하지 않는다.
두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.
background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);
선형 그라데이션
background: radial-gradient(#FF0000, #00FF00, #FFFF00);
원형 그라데이션
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
<url()> | <src()>
src()
함수의 매개변수를 나타낸다.
src( <string> <url-modifier>* )
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url() 함수의 매개변수를 나타낸다.
url( <string> <url-modifier>* ) | <url-token>
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
모든 함수를 표시하지 않을 수도 있다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
border-image-width
속성에 사용되는 타입이다.
이미지가 적용되는 상자의 테두리 영역을 9개의 영역으로 나누는 오프셋 값을 나타낸다.
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}
최대 4개의 값을 지정할 수 있는 다음의 값을 가질 수 있다.
<length-percentage [0,∞]>
<number [0,∞]>
auto
<length>
와 <percentage>
타입을 나타낸다.
<length> | <percentage>
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
어떠한 기준으로 부터 백분율로 표현한다.
정수 또는 실수를 표현한다.
테두리에 사용된 이미지 슬라이스의 실제 너비 또는 높이로 설정된다.
border-image: url('border.png') 30 round;
border-image: none 100% 1 0 stretch;
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Backgrounds and Borders Module Level 3 | Last review date: 2022-7-9 |