类似直播那种文字淡出边框效果如何做？

背景

先看效果，类似直播的文字，靠近边框出去的时候，是一种淡出的方式出去的，不会生硬的切边拦腰切断的感觉

要如何实现呢？查了下，主要是用到 mask 和 -webkit-mask-image 来实现效果

mask - CSS：层叠样式表 | MDN

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域

mask

简单利用以下代码就可以实现我们想要的大概效果

div {
    margin: auto;
    position: relative;
    width: 25vw;
    height: 300px;
  
    mask: linear-gradient(transparent, #000);
    -webkit-mask-image:linear-gradient(transparent,#000);
}

但是好像上边遮罩得有点长，如何让他遮罩得短一点呢，我们可以再继续看下  linear-gradient() 这个函数

linear-gradient() - CSS：层叠样式表 | MDN

可以看到我们是可以在颜色的后面加上百分比可以控制长度的

mask: linear-gradient(transparent, #000 20%);
-webkit-mask-image:linear-gradient(transparent,#000 20%);

 改成这样后，差不多就达到我们想要的效果了

最终效果 

有了这个后，我们在正在做的ai虚拟人项目就可以用上了