Thuộc tính mask-clip

Thuộc tính mask-clip thiết lập vùng của phần tử, trong giới hạn đó mặt nạ sẽ được hiển thị. Nó xác định phần nào của phần tử sẽ bị ảnh hưởng bởi việc che mặt nạ, và phần nào sẽ vẫn hiển thị mà không thay đổi.

Cú pháp

bộ chọn {
	mask-clip: giá trị | no-clip;
}

Giá trị

Giá trị	Mô tả
`border-box`	Mặt nạ được áp dụng cho vùng, bao gồm cả đường viền của phần tử.
`padding-box`	Mặt nạ được áp dụng cho vùng, bao gồm padding, nhưng không bao gồm đường viền.
`content-box`	Mặt nạ chỉ được áp dụng cho nội dung của phần tử.
`margin-box`	Mặt nạ được áp dụng cho vùng, bao gồm margin (thử nghiệm).
`fill-box`	Mặt nạ được áp dụng cho bounding box của đối tượng (dành cho SVG).
`stroke-box`	Mặt nạ được áp dụng cho stroke bounding box (dành cho SVG).
`view-box`	Mặt nạ được áp dụng cho viewbox (dành cho SVG).
`no-clip`	Mặt nạ không bị giới hạn trong vùng của phần tử.

Giá trị mặc định: border-box.

Ví dụ . Áp dụng mask-clip cho các vùng khác nhau

So sánh các giá trị khác nhau của mask-clip trên phần tử có đường viền và khoảng đệm:

<div class="box border-box">border-box</div>
<div class="box padding-box">padding-box</div>
<div class="box content-box">content-box</div>

.box {
	width: 200px;
	height: 100px;
	margin: 20px;
	padding: 20px;
	border: 10px dashed black;
	background: linear-gradient(45deg, red, blue);
	mask-image: linear-gradient(to right, black, transparent);
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	display: inline-block;
}

.border-box {
	mask-clip: border-box;
}

.padding-box {
	mask-clip: padding-box;
}

.content-box {
	mask-clip: content-box;
}

Ví dụ . Sử dụng no-clip

Trình diễn giá trị no-clip, khi mặt nạ vượt ra ngoài giới hạn của phần tử:

<div id="elem"></div>

#elem {
	width: 200px;
	height: 200px;
	background: linear-gradient(45deg, red, blue);
	mask-image: radial-gradient(circle, black 50%, transparent 70%);
	mask-size: 300px 300px;
	mask-position: center;
	mask-clip: no-clip;
	border: 2px solid black;
}

Ví dụ . SVG với các giá trị mask-clip khác nhau

Áp dụng các giá trị khác nhau cho phần tử SVG:

<svg width="400" height="200">
	<defs>
		<mask id="mask1" maskContentUnits="objectBoundingBox">
			<rect x="0.1" y="0.1" width="0.8" height="0.8" fill="white"/>
		</mask>
	</defs>
	
	<rect x="10" y="10" width="180" height="180" fill="blue" 
		mask="url(#mask1)" mask-clip="fill-box"/>
		
	<rect x="210" y="10" width="180" height="180" fill="red" 
		mask="url(#mask1)" mask-clip="view-box"/>
</svg>

Xem thêm

thuộc tính mask-origin,
xác định vị trí gốc của mặt nạ
thuộc tính mask-image,
thiết lập hình ảnh cho mặt nạ
thuộc tính mask,
cách viết tắt cho tất cả các thuộc tính che mặt nạ
thuộc tính clip-path,
tạo vùng cắt cho phần tử