CSS Masking mask-clip - 易学教程，面试笔记经验！

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

属性值

content-box: 掩码被剪辑到元素内容框的外边缘。
padding-box: 掩码被剪辑到元素内容框的外边缘填充框。
border-box: 遮罩被剪裁到元素边框框的外边缘。
fill-box: 蒙版被剪切到对象边界框，包括填充和边框。
stroke-box: 蒙版被剪切到笔画（边框区域）边界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: content-box

下面的示例演示了 -webkit-mask-clip: content-box 属性 Clips 遮罩了元素内容框的外边缘，而不考虑 padding 和border -

<html>
<head>
<style>
   .mask-container {
      width: 100px;
      height: 100px;
      background-color: gold;
      margin: 10px;
      border: 20px solid red;
      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>
   <div class="mask-container">
      无论何事，只要对它有无限的热情你就能取得成功。
   </div>
</body>
</html>

CSS mask-clip: padding-box

以下示例演示了 -webkit-mask-clip: padding-box 属性将 mask 剪辑到元素，不考虑边框 -

<html>
<head>
<style>
   .mask-container {
      width: 100px;
      height: 100px;
      background-color: gold;
      margin: 10px;
      border: 20px solid red;
      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>
   <div class="mask-container">
      无论何事，只要对它有无限的热情你就能取得成功。
   </div>
</body>
</html>

CSS mask-clip: border-box

下面的示例演示了 -webkit-mask-clip: border-box 属性将 mask 剪辑到元素的边框，包括内边距和边框 -

<html>
<head>
<style>
   .mask-container {
      width: 100px;
      height: 100px;
      background-color: gold;
      margin: 10px;
      border: 20px solid red;
      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>
   <div class="mask-container">
      无论何事，只要对它有无限的热情你就能取得成功。
   </div>
</body>
</html>

CSS mask-clip: fill-box

下面的示例演示了 -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(/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>
   <div class="mask-container">
      无论何事，只要对它有无限的热情你就能取得成功。
   </div>
</body>
</html>

CSS mask-clip: stroke-box

以下示例演示了 -webkit-mask-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(/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>
   <div class="mask-container">
      无论何事，只要对它有无限的热情你就能取得成功。
   </div>
</body>
</html>

CSS mask-clip: view-box

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(/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>
   <div class="mask-container">
      无论何事，只要对它有无限的热情你就能取得成功。
   </div>
</body>
</html>