소스 이미지의 가장자리 영역이 요소의 마스크 테두리 크기에 맞게 조정되는 방식을 지정한다.
현재 대부분의 웹브라우저가 mask-border-*
는 벤더프리픽스 타입의 -webkit-mask-box-image-*
속성으로 처리된다. 자세한 사항은 지원 웹브라우저 현황을 참고하기 바란다.
[ stretch | repeat | round | space ]{1,2}
변에 해당하는 이미지의 영역을 타일 처럼 요소의 테두리에 반복 배치한다. 변의 길이에 따라서 모서리쪽의 반복되는 이미지의 일부가 잘릴 수 있다.
repeat 와 동일한 방식으로 테두리에 이미지를 적용하나 변의 길이에 맞게 반복되는 영역을 적절하게 조절하여 잘리는 부분이 없도록 한다.
repeat 처럼 변의 길이에 맞게 이미지가 반복되지만 이미지의 영역을 조절하지 않고 반복되는 이미지와 이미지 사이에 공간을 두어 잘리는 부분 없이 변의 길이에 맞춘다.
이미지의 영역을 늘려 요소의 테두리로 적용한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
이미지의 영역을 늘려 요소의 테두리로 적용한다.
변에 해당하는 이미지의 영역을 타일 처럼 요소의 테두리에 반복 배치한다. 변의 길이에 따라서 모서리쪽의 반복되는 이미지의 일부가 잘릴 수 있다.
repeat 와 동일한 방식으로 테두리에 이미지를 적용하나 변의 길이에 맞게 반복되는 영역을 적절하게 조절하여 잘리는 부분이 없도록 한다.
repeat 처럼 변의 길이에 맞게 이미지가 반복되지만 이미지의 영역을 조절하지 않고 반복되는 이미지와 이미지 사이에 공간을 두어 잘리는 부분 없이 변의 길이에 맞춘다.
mask-border-repeat: round;
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Masking Module Level 1 | 후보 추천 초안 | Last review date: 2023-1-14 |