CSS 마스크 클립 속성

정의와 사용법

mask-clip 속성은 마스크 이미지가 영향을 미치는 영역을 지정합니다.

예제

보여줌 mask-clip 속성의 다른 값:

.masked {
  width: 150px;
  height: 150px;
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 100% 100%;
}
.mask1 {
  mask-clip: border-box;
}
.mask2 {
  mask-clip: content-box;
}
.mask3 {
  mask-clip: padding-box;
}
.mask4 {
  mask-clip: fill-box;
}
.mask5 {
  mask-clip: stroke-box;
}

직접 시도해 보세요

CSS 문법

mask-clip: border-box|content-box|padding-box|fill-box|stroke-box|view-box|no-clip|border|padding|content|text|initial|inherit;

속성 값

값 설명
border-box 그리는 내용이 경계 박스에裁cut됩니다。(border box) 기본 값
content-box 그리는 내용이 내용 박스에裁cut됩니다。(content box)
padding-box 그리는 내용이 내간격 박스에裁cut됩니다。(padding box)
fill-box 그리는 내용이 객체 경계 박스에裁cut됩니다。(object bounding box)
stroke-box 그리는 내용이 선 표시 경계 박스에裁剪됩니다。(stroke bounding box)
view-box 가장 가까운 SVG 시각화 영역을 참조 박스로 사용합니다。
no-clip 제한 없이裁剪。
border border-box와 동일합니다。
padding padding-box와 동일합니다。
content content-box와 동일합니다。
text 罩子裁剪到元素的文本。
기본 값 이 속성을 기본 값으로 설정합니다. 참고: 기본 값。
thuộc về 부모 요소에서 이 속성을 thừa kế합니다. 참고: thuộc về。

기술 세부 사항

기본 값: border-box
thừa kế: 아니요
애니메이션 제작: 지원하지 않습니다. 참고:애니메이션 관련 속성。
버전: CSS Masking 모듈 레벨 1
자바스크립트 문법: object.style.maskClip="padding-box"

브라우저 지원

표格에서의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다。

크롬 에지 파이어폭스 사파리 오페라
120 120 53 15.4 106

관련 페이지

교육:CSS 가려짐

참조:CSS 마스크 속성

참조:CSS 마스크 컴포지트 속성

참조:CSS 마스크 이미지 속성

참조:CSS 마스크 모드 속성

참조:CSS 마스크 오리진 속성

참조:CSS 마스크 포지션 속성

참조:CSS 마스크 리피트 속성

참조:CSS 마스크 사이즈 속성

참조:CSS 마스크 타입 속성