CSS mask-clip属性用法及代码示例

mask-clip CSS属性指定受遮罩影响的区域。

用法:

mask-clip:geometry-box values
/* Or */
mask-clip:Keyword values
/* Or */
mask-clip:Non-standard keyword values
/* Or */
mask-clip:Multiple values
/* Or */
mask-clip:Global values

属性值：此属性接受上面提到并在下面描述的值：

geometry-box个值：此属性值指的是用content-box，padding-box，border-box，margin-box，fill-box，stroke-box，view-box等单位定义的值。
Keyword values:此属性值是指用no-clip等单位定义的值
非标准关键字值：该属性值是指以边框，填充，内容，文本等单位定义的值。
Multiple values:此属性值指的是用padding-box，no-clip，view-box，fill-box，border-box等单位定义的值。
Global values:此属性值是指用诸如继承，初始，未设置等单位定义的值

范例1：下面的示例使用border-box说明mask-clip属性：

<!DOCTYPE html> 
<html> 
    
   <head> 
      <style> 
  
        .geeks{ 
              width:50%; 
              height:100px; 
              background:green; 
              border:10px solid red; 
              padding:10px; 
              -webkit-mask-image:url(image.svg); 
              mask-clip:border-box; 
        } 
        </style> 
    </head> 
<body> 
  
    <div class="geeks" > 
          GeeksforGeeks is Computer Science portal. 
          GeeksforGeeks is Computer Science portal. 
          GeeksforGeeks is Computer Science portal. 
    </div> 
  
</body> 
  
</html>

输出：

范例2：下面的示例使用padding-box说明mask-clip属性：

<!DOCTYPE html> 
<html> 
    <head> 
       <style> 
          .geeks{ 
                width:50%; 
                height:100px; 
                background:green; 
                border:5px solid red; 
                padding:10px; 
                -webkit-mask-image:url(image.svg); 
                mask-clip:padding-box; 
          } 
  
        </style> 
    </head> 
<body> 
  
      <div class="geeks" > 
            GeeksforGeeks is Computer Science portal. 
            GeeksforGeeks is Computer Science portal. 
            GeeksforGeeks is Computer Science portal. 
      </div> 
  
</body> 
  
</html>

输出：

支持的浏览器：

Chrome
Edge
Opera
Safari
Internet Explorer(不支持)。
Firefox(部分受支持)。

相关用法

注：本文由纯净天空筛选整理自thacker_shahid大神的英文原创作品 CSS mask-clip property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。