元素边框渐变的问题

Question

老板要做一个直播APP，我在做的过程中，遇到一个问题：一个盒子的边缘虚化处理，如下图

另补充一点：
这里是没有渐变颜色的，但是却有一个渐变效果（当有背景色的时候，比如图片中手臂的红色衣服那里就能看出有渐变），这个真是css能搞定的？
我画框的地方，这里的处理是如何做的？我使了很多方法，比如给外层盒子div的after伪类设置渐变linear-gradient+模糊filter+透明度opacity，结果并不理想，各位大神又没有更好的思路？请指教

Answer 1

这确实是css可以搞定的。
mask-image这个css属性，值为从上到下的线性渐变就行
尝试着写了一个，细节你可以微调。

    -webkit-mask-image: -webkit-linear-gradient(top,transparent 0%,rgba(0,0,0,.1) 1%,rgba(0,0,0,.8) 5%,#fff 100%);

Answer 2

:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 25px;
    background: -webkit-linear-gradient( rgba(255, 255, 255, 1), rgba(249, 183, 90, 0));
    background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

颜色方面可以做下微调