mask-border-source

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

mask-border-source CSS 屬性設定用於建立元素遮罩邊框的源影像。

mask-border-slice 屬性用於將源影像劃分為區域，然後將這些區域動態應用於最終的遮罩邊框。

語法

css

/* Keyword value */
mask-border-source: none;

/* <image> values */
mask-border-source: url("image.jpg");
mask-border-source: linear-gradient(to top, red, yellow);

/* Global values */
mask-border-source: inherit;
mask-border-source: initial;
mask-border-source: revert;
mask-border-source: revert-layer;
mask-border-source: unset;

值

none: 不使用遮罩邊框。
<image>: 用於遮罩邊框的影像引用。

正式定義

初始值	`none`
應用於	所有元素；在 SVG 中，它適用於除 `<defs>` 元素外的容器元素以及所有圖形元素
繼承性	否
計算值	按指定，但 `<url>` 值變為絕對路徑
動畫型別	離散

正式語法

mask-border-source = 
  none     |
  <image>  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

示例

基本用法

此屬性似乎尚未在任何地方得到支援。當它最終開始被支援時，它將用於定義邊框遮罩的來源。

css

mask-border-source: url("image.jpg");

基於 Chromium 的瀏覽器支援此屬性的過時版本 — mask-box-image-source — 帶有字首。

css

-webkit-mask-box-image-source: url("image.jpg");

注意：mask-border 頁面提供了一個工作示例（使用 Chromium 支援的過時帶字首的邊框遮罩屬性），因此您可以瞭解其效果。

規範

規範
CSS 蒙版模組 Level 1 # the-mask-border-source

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由MDN 貢獻者於2025年8月5日最後修改。

在 GitHub 上檢視此頁面 • 報告此內容存在的問題