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
列印頁面
上一頁
下一頁
廣告