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%;
                }
            }