怎么在HTML表格中通过mask-image为HTML表格边缘添加淡出羽化效果-html教程-PHP中文网

mask-image 不能直接作用于元素，因其非标准可遮罩元素；正确做法是将表格包裹在 display: block 且 overflow: hidden 的容器中，并对容器应用 mask-image，同时注意 safari 仅支持十六进制灰度值、firefox 需内联 svg 方案、chrome/edge 需双写 -webkit-mask-image 和 mask-image。

怎么在html表格中通过mask-image为html表格边缘添加淡出羽化效果

mask-image 不能直接作用于 `<table> 元素 <p>直接给 <code><table> 写 <code>mask-image` 基本无效——表格是替换元素（replaced element）的近亲，且其内部盒模型由浏览器严格控制，`mask` 无法穿透 `<tbody>/<tr>/<td> 的渲染层。你看到的“没反应”不是代码错，是浏览器根本不支持该用法。 <p>正确做法是把表格包进一个容器（如 <code><div>），再对这个容器应用 <code>mask-image`。表格本身需设为块级、居中、无边距，否则遮罩贴图会错位。

容器必须设 `display: block` 和 `overflow: hidden`（防遮罩外溢）

表格要加 `margin: 0 auto` + `border-collapse: collapse`，避免默认间距干扰遮罩定位

`mask-size: 100% 100%` 和 `mask-repeat: no-repeat` 必须显式声明，否则可能平铺或拉伸

Safari 中 `linear-gradient` 遮罩必须用 `#000`/`#fff`，禁用 `transparent`

写成 mask-image: linear-gradient(to bottom, #000, transparent) 在 Safari 里会静默失效：它把 transparent 当作 #000 处理，结果整个表格全显，毫无淡出。

必须改用纯灰度值，且只认十六进制写法：

#000 = 完全显示（不透明黑）
#fff = 完全隐藏（纯白）
#808080 = 半透（50% 灰），用于控制羽化强度
禁用 black/white 别名——Safari 解析不稳定

例如顶部羽化： -webkit-mask-image: linear-gradient(to bottom, #fff, #000); mask-image: linear-gradient(to bottom, #fff, #000);

Firefox 不支持 `mask-image: linear-gradient()`，必须换 SVG 内联方案

截至 2026 年中，Firefox 仍把渐变值当作无效声明直接忽略，等同于没写 mask-image。这不是 bug，是未实现特性。

唯一可靠方案是内联 SVG，并确保：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

SVG 中使用 <stop stop-color="black"></stop>（不能用 fill 或省略）
必须带锚点 #m，否则 Firefox 找不到 <mask></mask> 元素
URL 编码需完整：data:image/svg+xml;utf8,<svg>...</svg>#m

示例（左右羽化）：
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='m'%3E%3ClinearGradient x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='black'/%3E%3Cstop offset='0.1' stop-color='black'/%3E%3Cstop offset='0.9' stop-color='white'/%3E%3Cstop offset='1' stop-color='white'/%3E%3C/linearGradient%3E%3C/mask%3E%3C/svg%3E#m");

Chrome/Edge 必须双写 `-webkit-mask-image` + `mask-image`

新版 Chrome/Edge（Blink 内核）对标准 mask-image 支持不完整，只写 mask-image 往往没反应。必须同时提供带前缀的版本才能触发渲染。

完整写法示例（四边羽化）：

container {
  -webkit-mask-image: linear-gradient(90deg, #fff, #000, #000, #fff),
                      linear-gradient(0deg, #fff, #000, #000, #fff);
  mask-image: linear-gradient(90deg, #fff, #000, #000, #fff),
              linear-gradient(0deg, #fff, #000, #000, #fff);
  -webkit-mask-composite: xor;
  mask-composite: xor;
  mask-size: 100% 100%, 100% 100%;
  mask-repeat: no-repeat;
}

注意：mask-composite: xor 是让两个渐变叠加后产生“边缘镂空”效果的关键，漏掉就只剩单向淡出。

真正容易被忽略的是：羽化效果依赖容器尺寸与遮罩贴图的精确匹配，一旦表格宽高动态变化（比如响应式重排），mask-size 就得同步重算——这时候 SVG 方案比 CSS 渐变更稳。