css/js使用小技巧记录

1、透明底小图标换色

.iconBox {
        position: relative;
        width: 19px;
        height: 19px;
        overflow: hidden; // 隐藏原本颜色的图片
     .icon {
          position: absolute;
          left: -100%;
          width: 19px;
          height: 19px;
　　　     filter: drop-shadow(19px 0 0 red);
        }
 }

隐藏前：

 

隐藏后： 

第二种实现方法：

div {
　　width: 100px;
　　height: 100px;
　　-webkit-mask-image: url(图片链接);
　　-webkit-mask-size: 100% 100%;
　　mask-image: url(图片链接);
　　mask-size: 100% 100%;
　　background-color: #ff00ff; // 修改后的颜色
}

 2、颜色转换（"#fff" -> "255,255,255"）

const getRGBA = (color: string) => { // 比较憨的写法，待优化
    const colorArr = color.split('');
    if (colorArr.length > 4) {
      return `${parseInt(colorArr[1] + colorArr[2], 16)},${parseInt(colorArr[3] + colorArr[4], 16)},${parseInt(colorArr[5] + colorArr[6], 16)}`;
    } else {
      return `${parseInt(colorArr[1] + colorArr[1], 16)},${parseInt(colorArr[2] + colorArr[2], 16)},${parseInt(colorArr[3] + colorArr[3], 16)}`;
    }
  }

 3、渐变圆角边框

　　3.1 不需要透明底：直接用一个边框渐变色底div和一个背景色div底叠在一起实现；

　　3.2 需要透明底：

border: 2px solid transparent; // 边框粗细大小，设为透明色
border-radius: 12px; // 圆角
background: linear-gradient(
   105deg,
   red 0%,
   green 100%
) border-box; // 边框的渐变色
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;