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 上查看此页面 • 报告此内容存在的问题