CSS之UI变色

对于重复的东西，程序的职能是尽量的抽象简化出共性，然后赋予每个单独的物体自身的个性。
源于这一点，每次做样式相同，只有颜色不同的UI时，都很纠结，想给他们统一了，尤其是颜色可能比较多的情况，好在现在CSS的功能也很强大，基本可以满足我这个小需求。免得我截取一排颜色不同的UI出来。便于以后的更改。

效果

说在多不如来个效果实在。

代码

以左边箭头的html和css代码为例，下面的八边形同理。
以下是html结构。

<div class="arrow arrowLeft"><div class="icon"></div></div>

以下是css样式。

#app{
        --cwhite:#ffffff;
        --cblack:#000000;
        --cred:#ff0000;
        --cblue:#0782f5;
        --cgreen:#00b65e;
        --cyellow:#fa9f01;
        --csel:var(--cred); 
    }
.arrow
    {
        width: 65px;
        height: 98px;
        z-index: 99;
        top: 50%;
        margin-top: -46px;
        position: absolute;
        overflow: hidden;
        cursor: pointer;
    }
    .arrowLeft
    {
        left: 15vw;
        
    }
    .icon
    {
        position: relative;
        background: url("../img/arrow.png");
        width: 100%;
        height: 100%;
        /* 原本为65，也就是父级宽度，但是ios会出现图片和阴影都不可见的情况，故多留一个像素不被裁减*/
        left: -64px; 
        /* IOS特有 */
        /* transform: translate3d(0,0,0); */
        -ms-filter :drop-shadow(var(--csel) 65px 0px);
        -o-filter:drop-shadow(var(--csel) 65px 0px);
        -moz-filter: drop-shadow(var(--csel) 65px 0px);
        -webkit-filter: drop-shadow(var(--csel) 65px 0px);
        filter: drop-shadow(var(--csel) 65px 0px);
    }

以下是arrow.png。是一个白色边框，半透明填充的三角形。

最主要用到的就是 filter: drop-shadow(var(–csel) 65px 0px);
这一行，在原三角形的基础上，绘制出来一个一模一样颜色不同的图像（阴影），将这个阴影放到.arrow的div里，在用.arrow的div将多余的原三角形隐藏。
以下是没有隐藏的效果，左边的会被 overflow: hidden; 所隐藏。

八边形的代码也是同理，所以我们只需要一个八边形的图片，就可以用代码改成我们想要的颜色。
因为我定义了CSS变量，所以每次只需要更改var(–csel)里的–csel变量就可以改变图片的颜色。

这个css变量怎么用代码更改，网上有很多教程。大体就是获取颜色和设置颜色。如下：

let cssdom=document.querySelector('#app');
let cssstyle=getComputedStyle(cssdom);
//获取css值
//let cssval = String(cssstyle.getPropertyValue('--csel')).trim();
cssdom.style.setProperty('--csel','var(--'+item.className+')');

因为里面用了Vue框架，所以设立了一个id为app的总DIV，熟悉vue的小伙伴应该不陌生。

写到这里基本主要的东西都写完了，因为本身这个项目要求在移动端也是可以看到的，但是在IOS手机端测试的时候发现UI都没有出来，调试了半天发现了两个问题。

• arrow的 overflow: hidden;会把我们filter出来的影子也隐藏掉，这个是为什么我也不清楚，所以我把.icon的left从-65px.改为了-64px。也就是相对于给原三角留了一个像素的空间。这样就可以把原图隐藏，不影响我们的“颜色影子”。
• 有了带颜色的影子，我们还希望能够实时的更改影子的颜色。这时候如果不开启，transform: translate3d(0,0,0); 也就是部分3D功能是不能改变影子的颜色的，具体是为什么，我也不太清楚。
  以上的两点，在上面的代码中都有注释。

尴尬的是，有的平台开通 transform: translate3d(0,0,0); 会显示不正常，所以这行代码我只加载在了iOS的手机端。类似以下这种方式。

@supports(-webkit-touch-callout:none) {
      /*针对IOS的css*/
       .arrow .icon,.acolor .img .icon2
       {
           transform: translate3d(0,0,0);
       }
   }

基本上，目前这些代码的思路可以满足我目前的需求，有不完善的地方以后在做修改和完善吧。

感谢

写这个代码的时候，也借鉴了一些零零散散别人的代码，在此表示感谢，因为写了好几天了，连接找不到了，没办法上连接了，这也是我愿意，整理我自己的心得分享出来的原因。

看到这里也许还有部分的小伙伴还是有一些疑问，或是想要原码参考的，可以看一下评论或者是我的个人介绍，里面会有那么一丝丝的线索哦。