CSS - mask-clip 属性

上一页
下一页

CSS mask-clip 属性控制如何将遮罩应用于元素。它根据元素的大小和位置确定哪些部分受遮罩影响。

语法

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

属性值

值 描述
border-box 遮罩被剪裁到元素边框盒的外部边缘。
content-box 遮罩被剪裁到元素内容盒的外部边缘。
padding-box 遮罩被剪裁到元素内边距盒的外部边缘。
fill-box 遮罩被剪裁到对象边界框，包括内边距和边框。
stroke-box 遮罩被剪裁到描边（边框区域）边界框。
view-box 最近的 SVG 视口作为参考框，将其内容的原点与viewBox属性中的尺寸对齐。
no-clip 不进行剪裁。
border 与 border-box 相同。
padding 与 padding-box 相同。
content 与 content-box 相同。
text 它将遮罩剪裁到元素的文本。
initial 将属性设置为其默认值。
inherit 从父元素继承属性。

CSS Mask Clip 属性示例

以下示例使用不同的值解释了mask-clip属性。

使用 Content Box 值的 Mask Clip 属性

要仅将遮罩应用于元素的内容区域（不包括内边距、边框和外边距），我们使用content-box值。效果仅在由宽度和高度定义的内容区域内可见。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         width: 100px;
         height: 100px;
         background-color: lightgreen;
         margin: 10px;
         border: 20px solid green;
         padding: 20px;
         -webkit-mask-image: url(/css/images/book.png);
         -webkit-mask-size: 100% 100%;
         -webkit-mask-clip: content-box;
         mask-image: url(/css/images/book.png);
         mask-size: 100% 100%;
         mask-clip: content-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-clip property
   </h2>
   <h4>
      clip-property: content-box
   </h4>
   <div class="mask-container">
      TutorialsPoint offers diverse, 
      comprehensive tech and programming 
      tutorials for learners.
   </div>
</body>

</html>

使用 Padding Box 值的 Mask Clip 属性

要将遮罩应用于元素的内边距区域（包括内边距但不包括边框），我们使用padding-box值。效果从内容区域延伸到内边距的外边缘。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         width: 100px;
         height: 100px;
         background-color: lightgreen;
         margin: 10px;
         border: 20px solid green;
         padding: 20px;
         -webkit-mask-image: url(/css/images/book.png);
         -webkit-mask-size: 100% 100%;
         -webkit-mask-clip: padding-box;
         mask-image: url(/css/images/book.png);
         mask-size: 100% 100%;
         mask-clip: padding-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-clip property
   </h2>
   <h4>
      clip-property: padding-box
   </h4>
   <div class="mask-container">
      TutorialsPoint offers diverse, 
      comprehensive tech and programming 
      tutorials for learners.
   </div>
</body>

</html>

使用 Border Box 值的 Mask Clip 属性

要将遮罩应用于元素的整个区域（包括内容、内边距和边框），我们使用border-box值。它不会延伸到外边距区域，影响元素的可视全尺寸。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         width: 100px;
         height: 100px;
         background-color: lightgreen;
         margin: 10px;
         border: 20px solid green;
         padding: 20px;
         -webkit-mask-image: url(/css/images/book.png);
         -webkit-mask-size: 100% 100%;
         -webkit-mask-clip: border-box;
         mask-image: url(/css/images/book.png);
         mask-size: 100% 100%;
         mask-clip: border-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-clip property
   </h2>
   <h4>
      clip-property: border-box
   </h4>
   <div class="mask-container">
      TutorialsPoint offers diverse, 
      comprehensive tech and programming 
      tutorials for learners.
   </div>
</body>

</html>

使用 Fill Box 值的 Mask Clip 属性

要将遮罩应用于元素填充的边界内（与 SVG 元素相关），我们使用fill-box值。遮罩覆盖将填充颜色的区域，不包括描边。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         width: 100px;
         height: 100px;
         background-color: lightgreen;
         margin: 10px;
         border: 20px solid green;
         padding: 20px;
         -webkit-mask-image: url(/css/images/book.png);
         -webkit-mask-size: 100% 100%;
         -webkit-mask-clip: fill-box;
         mask-image: url(/css/images/book.png);
         mask-size: 100% 100%;
         mask-clip: fill-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-clip property
   </h2>
   <h4>
      clip-property: fill-box
   </h4>
   <div class="mask-container">
      TutorialsPoint offers diverse, 
      comprehensive tech and programming 
      tutorials for learners.
   </div>
</body>

</html>

使用 Stroke Box 值的 Mask Clip 属性

要将遮罩应用于元素描边覆盖的区域（与 SVG 元素相关），我们使用stroke-box值。这包括描边宽度，将遮罩与描边的外边界对齐。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         width: 100px;
         height: 100px;
         background-color: lightgreen;
         margin: 10px;
         border: 20px solid green;
         padding: 20px;
         -webkit-mask-image: url(/css/images/book.png);
         -webkit-mask-size: 100% 100%;
         -webkit-mask-clip: stroke-box;
         mask-image: url(/css/images/book.png);
         mask-size: 100% 100%;
         mask-clip: stroke-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-clip property
   </h2>
   <h4>
      clip-property: stroke-box
   </h4>
   <div class="mask-container">
      TutorialsPoint offers diverse, 
      comprehensive tech and programming 
      tutorials for learners.
   </div>
</body>

</html>

使用 View Box 值的 Mask Clip 属性

要将遮罩应用于 SVG 的 viewBox 边界内，并与 SVG 的坐标系对齐，我们使用view-box值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         width: 100px;
         height: 100px;
         background-color: lightgreen;
         margin: 10px;
         border: 20px solid green;
         padding: 20px;
         -webkit-mask-image: url(/css/images/book.png);
         -webkit-mask-size: 100% 100%;
         -webkit-mask-clip: view-box;
         mask-image: url(/css/images/book.png);
         mask-size: 100% 100%;
         mask-clip: view-box;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-clip property
   </h2>
   <h4>
      clip-property: view-box
   </h4>
   <div class="mask-container">
      TutorialsPoint offers diverse, 
      comprehensive tech and programming 
      tutorials for learners.
   </div>
</body>

</html>

使用 No Clip 值的 Mask Clip 属性

要将遮罩应用于元素的盒模型而没有任何剪裁，我们使用no-clip值。遮罩效果不受内容、内边距、边框或外边距边界的限制，使遮罩延伸到元素的标准框之外。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .mask-container {
         width: 100px;
         height: 100px;
         background-color: lightgreen;
         margin: 10px;
         border: 20px solid green;
         padding: 20px;
         -webkit-mask-image: url(/css/images/book.png);
         -webkit-mask-size: 100% 100%;
         -webkit-mask-clip: no-clip;
         mask-image: url(/css/images/book.png);
         mask-size: 100% 100%;
         mask-clip: no-clip;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-clip property
   </h2>
   <h4>
      clip-property: no-clip
   </h4>
   <div class="mask-container">
      TutorialsPoint offers diverse, 
      comprehensive tech and programming 
      tutorials for learners.
   </div>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
mask-clip 120 120 53 15.4 106
css_properties_reference.htm
打印页面
上一页
下一页
广告