嘿，我懂你现在的困扰——本来只想给元素尾部加渐变遮罩，结果整个元素除了右边一小部分都被遮没了对吧？问题出在你对mask属性的使用逻辑上，咱们来一步步改好它：

问题根源 #

你当前的mask-image是从黑到透明的渐变，但mask-size: 30px让这个渐变只覆盖元素右侧30px的区域，而元素左侧没有mask覆盖的部分，默认会被透明的mask层遮罩（因为mask的默认规则是：mask透明的区域对应元素会被隐藏），所以左边就看不见了。

修正后的代码 #

我们需要让mask覆盖整个元素宽度，同时只在右侧30px的范围内做从显示到隐藏的渐变，左边保持完全可见：

.masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  /* 核心修改：让mask覆盖全宽，左侧保持黑色（显示元素），右侧30px渐变到透明（隐藏元素） */
  mask-image: linear-gradient(to right, black 0 calc(100% - 30px), transparent 100%);
}

<div class="masked"></div>

原理说明 #

这个渐变做了三件事：

• 从元素开头到100% - 30px的位置，mask都是纯黑色（alpha通道完全不透明），所以这部分元素会完整显示
• 从100% - 30px到元素末尾，mask从黑色渐变到透明，对应元素会逐渐消失
• 因为没有设置mask-size，默认就是100% 100%，mask会覆盖整个元素，不会出现左侧无mask被隐藏的问题

如果你想更直观地控制mask的位置，也可以用两层mask组合（不过上面的方法更简洁）：

.masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  mask-image: 
    linear-gradient(black, black), /* 第一层：全黑mask，让整个元素显示 */
    linear-gradient(to right, black, transparent); /* 第二层：右侧渐变遮罩 */
  mask-size: 100% 100%, 30px 100%;
  mask-position: center, right;
  mask-repeat: no-repeat;
  mask-composite: subtract; /* 第二层减去第一层的对应区域，实现右侧渐变遮罩 */
}

不过第一种方法已经足够简单好用啦，试试看应该就能得到你想要的效果！

内容的提问来源于stack exchange，提问作者Jon Koops