mask：通过遮罩或在特定点剪切图像来隐藏部分或全部元素。
mask-composite：表示对当前蒙版层与其下面的蒙版层使用的合成操作。
使用cssmask-composite、mask属性实现圆边框渐角变，不需要复杂的代码、SVG 或多个元素，只需几行行 CSS 代码即可。
图片.png
.css{
padding: 5px 8px;
cursor: pointer;
position: relative;
&::before { /* 1 */
display: block;
content: '';
border-radius: 6px;
border: 2px solid transparent;
background: linear-gradient(90deg, #8f41e9, #578aef) border-box; /* 2 */
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); /* 3 */
-webkit-mask-composite: xor; /* 4 */
mask-composite: exclude;
position: absolute;
width: 100%;
height: 100%;
}
图片.png
.b2 {
position: relative;
&::before {
/* 1 */
display: block;
content: '';
border-radius: 24rpx;
border: 2rpx solid transparent;
background: linear-gradient(90deg, rgba(50, 215, 75, 1), rgba(254, 216, 14, 1)) border-box;
/* 2 */
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
/* 3 */
-webkit-mask-composite: xor;
/* 4 */
mask-composite: exclude;
left: 0;
top: 0;
position: absolute;
width: 100%;
height: 100%;
}
}
