css - 元素边框渐变的问题

问题描述

问 题

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

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

解决方案

这确实是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%);

这篇关于css - 元素边框渐变的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！