border-image-repeat
시도해보기
구문
/* 키워드 값 */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
/* 세로방향 | 가로방향 */
border-image-repeat: round stretch;
/* 전역 값 */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;
border-image-repeat
속성은 한 개 또는 두 개의 값을 사용해 지정할 수 있습니다.
- 한 개의 값을 지정하면 모든 네 면이 같은 방식을 사용합니다.
- 두 개의 값을 지정하면, 첫 번째 값은 위와 아래, 두 번째 값은 왼쪽과 오른쪽 면의 방식을 지정합니다.
값
stretch
-
원본 이미지의 모서리 영역을 늘리거나 줄여 간격을 채웁니다.
repeat
-
원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 마지막 이미지는 잘릴 수 있습니다.
round
-
원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 늘어나거나 줄어들 수 있습니다.
space
-
원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 각 타일에 균등하게 공백을 배치합니다.
형식 구문
예제
CSS
#bordered {
width: 12rem;
margin-bottom: 1rem;
padding: 1rem;
border: 40px solid;
border-image: url("border.png") 27;
border-image-repeat: stretch; /* 라이브 샘플에서 바꿀 수 있습니다 */
}
명세
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-border-image-repeat |
초기값 | stretch |
---|---|
적용대상 | all elements, except internal table elements when border-collapse is collapse . It also applies to ::first-letter (en-US). |
상속 | no |
계산 값 | as specified |
Animation type | discrete |
브라우저 호환성
BCD tables only load in the browser