记实现字体渐变色方法-个人记录

//字体渐变色
$text-gradient-color: linear-gradient(13deg, #FF7613 0%, #3DEEEE 100%, #16B9CF 100%);
span{
    background: $text-gradient-color; 
    -webkit-text-fill-color: transparent;    给文字填充颜色透明
    -webkit-background-clip: text;  背景色按照文字面积进行剪切
}

//渐变边框加圆角
scss mixin 混入

$back:#1D1D1D
$grad:linear-gradient(44deg, #3D51EE 0%, #1355FF 100%)
$clip1:padding-box
$clip2:border-box

@mixin border-radius($back, $grad, $clip1:padding-box, $clip2:border-box) {    
    background-image: linear-gradient($back, $back), $grad; 
    //给盒子设置背景色 前：盒子本身颜色  后：边框颜色    
    background-clip: $clip1, $clip2;  背景剪切 padding 和 border    
    background-origin: border-box;  背景起源
    border: 1px solid transparent;  边框高度
}