css实现圆角+边框渐变+背景半透明

ui小姐姐经常搞一些花里胡哨的东西，圆角+边框渐变+背景半透明，虽然每个都可以弄，但是合在一起真的不好弄，主要是因为通过border–image设置的边框渐变，无法使用圆角，下面是自己搜索整理的一些可以的方案。

方式1：使用background-clip，然后绘制多个背景图:

.element1{width:200px;height:200px;box-sizing: border-box;border-radius: 20px;border:5px solid transparent;background-origin: border-box;background-clip: content-box,content-box,border-box;background-image:linear-gradient(to right,rgba(255,0,0,.4),rgba(0,255,255,.5)),linear-gradient(#fff,#fff),linear-gradient(45deg, #ff7e5f, #feb47b, #86e3ce, #d4a5a5);
}

这种方法有个问题，就是如果下面是图片的话，无法穿透图片，效果如下：

因此如果你不需要显示底图的话，可以使用这种方式。

方式2：使用mask

.element {width: 200px;height: 200px;border-radius: 20px;position: relative;display: flex;justify-content: center;align-items: center;background: linear-gradient(to right,rgba(255,0,0,.4),rgba(0,255,255,.5));
}.element::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: inherit;border: 2px solid transparent;box-sizing: border-box;background: linear-gradient(45deg, #ff7e5f, #feb47b, #86e3ce, #d4a5a5);-webkit-mask: linear-gradient(red 0 0) content-box, linear-gradient(red 0 0);-webkit-mask-composite: destination-out;mask-composite: exclude;
}

这种失效的效果是可以的，可以穿透显示后面的背景，效果如下：

这种方式的话，稍微复杂一些，需要使用两个蒙层，然后计算去除蒙层重叠的部分。