本文系统讲解 CSS mask-position 的作用机制、语法规范及实际定位技巧，重点解析如何结合 mask-image（尤其是渐变遮罩）实现遮罩层在元素内的精确摆放，并通过 radial-gradient 的 at 语法与 mask-position 的协同使用，解决常见偏移错位问题。
本文系统讲解 css `mask-position` 的作用机制、语法规范及实际定位技巧，重点解析如何结合 `mask-image`（尤其是渐变遮罩）实现遮罩层在元素内的精确摆放，并通过 radial-gradient 的 `at` 语法与 `mask-position` 的协同使用，解决常见偏移错位问题。
CSS 遮罩（Mask）是一种强大的视觉控制技术，它通过定义一个“透明度蒙版”来决定目标元素哪些区域可见、哪些被隐藏。而 mask-position 正是控制该遮罩图像（无论是 PNG、SVG 还是 CSS 渐变）在其定位参照盒（默认为 border-box）内起始位置的关键属性。它不改变遮罩本身形状或大小，仅决定其“落点”。
一、mask-position 的核心行为逻辑
mask-position 接收一个或两个 <position></position> 值，语义与 background-position 高度一致，但作用对象是遮罩层而非背景：
-
单值写法（如
center、left、30%）：- 若为关键字（如
left），则水平方向设为该值，垂直方向默认为center； - 若为长度/百分比（如
30px），则仅设置水平位置，垂直位置默认为50%。
- 若为关键字（如
-
双值写法（如
left center、20% 70%）：立即学习“前端免费学习笔记（深入）”；
- 第一个值控制水平位置（x 轴），第二个值控制垂直位置（y 轴）；
- 关键字需遵循方向约束：
left/right/center适用于 x；top/bottom/center适用于 y； - 混合使用时顺序不可颠倒（如
top 20px合法，20px top在标准中无效，部分浏览器可能容错）。
⚠️ 注意：mask-position 仅对 mask-image 生效；若遮罩由 mask 简写属性直接定义（如 mask: radial-gradient(...)），优先级更高的 at 定位语法会覆盖 mask-position —— 这正是示例中问题的根源。
二、为什么 mask-position: left center 对 radial-gradient 无效？
在原始代码中：
div {
mask: radial-gradient(20px, transparent 100%, black);
mask-position: left center; /* ❌ 不生效 */
}此处 radial-gradient(20px, ...) 默认以 center center 为圆心绘制。mask-position 虽已声明，但 radial-gradient 函数自身未显式指定圆心位置，导致浏览器忽略外部 mask-position，坚持使用默认中心点。
✅ 正确做法是将定位逻辑内聚到渐变函数中，使用 at <position></position> 语法：
div {
background: green;
mask: radial-gradient(50px at left center, transparent 100%, black);
/* ↑ 半径 ↑ 显式圆心位置 ↑ 颜色停止点 */
}at left center 表示：以元素左边缘与垂直中心交点为圆心，绘制半径 50px 的径向渐变。此时 transparent 100% 形成一个完全透明的圆形区域（即“镂空”），black 作为不透明基底保留其余绿色背景 —— 最终呈现为左侧居中的半圆形切口效果。
三、完整可运行示例
<!DOCTYPE html>
<html>
<head>
<style>
.masked-box {
width: 300px;
height: 200px;
background: #2ecc71; /* green */
/* 关键：radial-gradient + at 定位 */
-webkit-mask: radial-gradient(60px at left center, transparent 100%, #000);
mask: radial-gradient(60px at left center, transparent 100%, #000);
}
body {
margin: 0;
background: #ffc0cb; /* pink */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
</style>
</head>
<body>
<div class="masked-box"></div>
</body>
</html>? 效果说明：绿色方块左侧中央出现一个直径约 120px 的透明半圆切口，露出背后粉色背景，视觉上形成“左置半圆镂空”。
四、实用建议与兼容性提醒
- ✅ 优先使用
at定位：对于linear-gradient或radial-gradient遮罩，at <position></position>是最可靠、语义最清晰的定位方式，避免与mask-position冲突。 - ✅ 添加
-webkit-前缀：Safari 目前仍需-webkit-mask支持，Chrome/Firefox 已支持标准mask。 - ⚠️ 注意遮罩坐标系：
mask-position和at均基于mask-origin（默认border-box）计算；如需相对内容区定位，可设mask-origin: content-box。 - ? 浏览器支持：
mask及mask-position在现代浏览器中已广泛支持（Chrome 1+, Firefox 53+, Safari 3.1+），但mask简写属性对 SVG 遮罩的支持仍有限，推荐用mask-image+ 子属性组合更稳妥。
掌握 mask-position 与渐变 at 语法的协同逻辑，是实现精准、可控 CSS 遮罩效果的基石。它让设计师无需依赖图像编辑软件，即可在 CSS 层面完成复杂蒙版布局，大幅提升 UI 实现效率与响应式适应能力。
