CSS 两种「渐隐」不是一回事

opacity：整块消失

元素透明度从 1 到 0，没有方向。适合出现 / 消失、转场、模态框。

.fade-out {
  opacity: 0;
  transition: opacity .25s ease;
}

linear-gradient：边缘融进背景

元素还在，只是颜色沿某个方向变成透明。适合文字溢出用 mask-image 做省略、图片贴边、滚动区域底部那条「下面还有」的提示。

.fade-edge {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

叠在一起

线性渐变给方向，opacity 给整体退场。单独用 opacity，消失会有点「啪」一下；加一条方向，过程更像纸被抽走。

记这一句就够：要消失，用 opacity；要融入，用渐变。