如何同时为元素添加左右两侧的线性渐变遮罩？

要同时给元素添加左右两侧的渐变遮罩，只需调整mask-image的渐变参数，让渐变从左侧透明过渡到不透明，再从右侧不透明过渡回透明即可。修改后的代码如下：

mask-image: linear-gradient(
  to right,
  rgba(0, 0, 0, 0) 0%,
  rgba(0, 0, 0, 1) 15%,
  rgba(0, 0, 0, 1) 85%,
  rgba(0, 0, 0, 0) 100%
);
-webkit-mask-image: linear-gradient(
  to right,
  rgba(0, 0, 0, 0) 0%,
  rgba(0, 0, 0, 1) 15%,
  rgba(0, 0, 0, 1) 85%,
  rgba(0, 0, 0, 0) 100%
);

代码说明： #

• rgba(0,0,0,0)是完全透明的遮罩，对应元素边缘的渐变消失效果
• 中间的rgba(0,0,0,1)是完全不透明的遮罩，保证元素中间区域完整显示
• 你可以根据需求调整15%和85%这两个数值：数值越小，渐变范围越宽；数值越大，渐变范围越窄

如果需要更灵活的拆分控制，也可以用两个独立渐变组合（用逗号分隔），效果一致：

mask-image: 
  linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1)),
  linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
-webkit-mask-image: 
  linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1)),
  linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));

这种写法是分别给左侧和右侧添加渐变遮罩，两个渐变会自动叠加覆盖整个元素。

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