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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。