1. 首页
  2. CSS 菜鸟教程
  3. CSS Masking - mask-clip 属性

CSS Masking - mask-clip 属性

CSS mask-clip 属性可以采用各种值来指定如何相对于元素的框剪裁蒙版。

可能的值

  • content-box - 蒙版被剪裁到元素内容框的外边缘。
  • padding-box - 蒙版被剪裁到元素的填充框的外边缘。
  • border-box - 蒙版被剪裁到元素边框的外边缘。
  • fill-box - 蒙版被剪裁到对象边界框，包括填充和边框。
  • stroke-box- 蒙版被剪裁到描边（边框区域）边界框。
  • view-box − 最近的SVG视口被视为参考框。具有 viewBox 属性的 SVG 元素的内容放置在 viewBox 定义的坐标系的原点，引用框的大小/尺寸设置为 viewBox 属性中指定的宽度和高度。
  • no-clip − 蒙版未夹住;它延伸到元素的盒子之外。

适用于

所有元素。在 SVG 中，它适用于容器元素，不包括 <defs> 元素和所有图形元素

语法

<geometry-box> 值

	mask-clip: content-box;
	mask-clip: padding-box;
	mask-clip: border-box;
	mask-clip: fill-box;
	mask-clip: stroke-box;
	mask-clip: view-box;

关键字值

mask-clip: no-clip;

CSS mask-clip - 内容框

以下示例演示了 -webkit-mask-clip： content-box 属性剪辑遮罩元素内容框的外边缘，而不考虑填充和边框 -

<html>
<head>
<style>
	 	.mask-container {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: gold;
	 	 	 margin: 10px;
	 	 	 border: 20px solid red;
	 	 	 padding: 20px;
	 	 	 -webkit-mask-image: url(images/book.png);
	 	 	 -webkit-mask-size: 100% 100%;
	 	 	 -webkit-mask-clip: content-box;
	 	 	 mask-image: url(images/book.png);
	 	 	 mask-size: 100% 100%;
	 	 	 mask-clip: content-box;
	 	}
</style>
</head>
<body>
	 	<div class="mask-container">
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	 	</div>
</body>
</html>

CSS mask-clip - 填充框

以下示例演示了 -webkit-mask-clip： padding-box 属性将蒙版剪辑到元素的填充框，而不考虑边框 -

<html>
<head>
<style>
	 	.mask-container {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: gold;
	 	 	 margin: 10px;
	 	 	 border: 20px solid red;
	 	 	 padding: 20px;
	 	 	 -webkit-mask-image: url(images/book.png);
	 	 	 -webkit-mask-size: 100% 100%;
	 	 	 -webkit-mask-clip: padding-box;
	 	 	 mask-image: url(images/book.png);
	 	 	 mask-size: 100% 100%;
	 	 	 mask-clip: padding-box;
	 	}
</style>
</head>
<body>
	 	<div class="mask-container">
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	 	</div>
</body>
</html>

CSS mask-clip - 边框框

以下示例演示了 -webkit-mask-clip： border-box 属性将蒙版剪辑到元素的边框，包括填充和边框 -

<html>
<head>
<style>
	 	.mask-container {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: gold;
	 	 	 margin: 10px;
	 	 	 border: 20px solid red;
	 	 	 padding: 20px;
	 	 	 -webkit-mask-image: url(images/book.png);
	 	 	 -webkit-mask-size: 100% 100%;
	 	 	 -webkit-mask-clip: border-box;
	 	 	 mask-image: url(images/book.png);
	 	 	 mask-size: 100% 100%;
	 	 	 mask-clip: border-box;
	 	}
</style>
</head>
<body>
	 	<div class="mask-container">
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	 	</div>
</body>
</html>

CSS mask-clip - 填充框

以下示例演示了 -webkit-mask-clip： fill-box 属性将蒙版剪辑到内容框元素，而不带填充和边框 -

<html>
<head>
<style>
	 	.mask-container {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: gold;
	 	 	 margin: 10px;
	 	 	 border: 20px solid red;
	 	 	 padding: 20px;
	 	 	 -webkit-mask-image: url(images/book.png);
	 	 	 -webkit-mask-size: 100% 100%;
	 	 	 -webkit-mask-clip: fill-box;
	 	 	 mask-image: url(images/book.png);
	 	 	 mask-size: 100% 100%;
	 	 	 mask-clip: fill-box;
	 	}
</style>
</head>
<body>
	 	<div class="mask-container">
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	 	</div>
</body>
</html>

CSS mask-clip - 描边框

以下示例演示了 -webkit-mask-clip： stroke-box 属性将蒙版剪辑到图像元素的描边框（边框区域），包括填充和边框 -

<html>
<head>
<style>
	 	.mask-container {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: gold;
	 	 	 margin: 10px;
	 	 	 border: 20px solid red;
	 	 	 padding: 20px;
	 	 	 -webkit-mask-image: url(images/book.png);
	 	 	 -webkit-mask-size: 100% 100%;
	 	 	 -webkit-mask-clip: stroke-box;
	 	 	 mask-image: url(images/book.png);
	 	 	 mask-size: 100% 100%;
	 	 	 mask-clip: stroke-box;
	 	}
</style>
</head>
<body>
	 	<div class="mask-container">
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	 	</div>
</body>
</html>

CSS mask-clip - 视图框

SVG 蒙版用于根据另一个图像或形状的形状隐藏图像或形状的部分。

以下示例演示了蒙版形状是 SVG 元素中间的一个圆圈，而蒙版元素是覆盖整个 SVG 元素的矩形 -

<html>
<head>
<style>
	 	.mask-container {
	 	 	 width: 300px;
	 	 	 height: 200px;
	 	 	 position: relative;
	 	}
	 	svg {
	 	 	 width: 100%;
	 	 	 height: 100%;
	 	}
	 	rect {
	 	 	 fill: yellow;
	 	}
	 	.mask-rectangle {
	 	 	 mask: url(#maskViewbox);
	 	 	 -webkit-mask-clip: view-box;
	 	}
</style>
</head>
<body>
	 	<div class="mask-container">
	 	 	 <svg viewBox="0 0 150 100">
	 	 	 	 	<mask id="maskViewbox" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
	 	 	 	 	<rect x="0" y="0" width="1" height="1"/>
	 	 	 	 	<circle cx="0.5" cy="0.5" r="0.4"/>
	 	 	 	 	</mask>
	 	 	 	 	<rect x="0" y="0" width="100%" height="100%" class="mask-rectangle"/>
	 	 	 </svg>
	 	</div>
</body>
</html>

CSS mask-clip - no-clip

以下示例演示了 -webkit-mask-clip： no-clip 属性如何防止掩码图像剪裁 -

<html>
<head>
<style>
	 	.mask-container {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: gold;
	 	 	 margin: 10px;
	 	 	 border: 20px solid red;
	 	 	 padding: 20px;
	 	 	 -webkit-mask-image: url(images/book.png);
	 	 	 -webkit-mask-size: 100% 100%;
	 	 	 -webkit-mask-clip: no-clip;
	 	 	 mask-image: url(images/book.png);
	 	 	 mask-size: 100% 100%;
	 	 	 mask-clip: no-clip;
	 	}
</style>
</head>
<body>
	 	<div class="mask-container">
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	 	</div>
</body>
</html>
<< CSS Masking - mask-composite 属性 CSS Masking - mask-image 属性 >>