css通过filter改变icon的颜色，实际应用有个场景，就是点击课程播放列表的时候，要给当前选中的课时加上高亮(选中状态)，默认的icon是黑色，高亮的时候没有切图,所以就需要自己根据当前默认的icon生成一个高亮的icon，于是css的filter的drop-shadow属性正好可以解决这个问题.

1.概念
filter: drop-shadow(x-offset y-offset blur color)

2.属性
drop-shadow()方法的参数有4个，每一个参数说明如下:

（1）x-offset：定义水平阴影的偏移距离，可以使用负值。由于CSS3采用的是W3C坐标系，因此x-offset取值为正时，向右偏移；取值为负时，向左偏移。
（2）y-offset：定义垂直阴影的偏移距离，可以使用负值。由于CSS3采用的是W3C坐标系，因此y-offset取值为正时，向下偏移；取值为负时，向上偏移。
（3）blur：定义阴影的模糊半径，只能为正值。
（4）color：定义阴影的颜色。

3.实际使用代码

<div class="lesson-list">
        <ul>
          <li v-for="(item, index) in courseManageList" :key="index" :style="{'background-color': item.id === learnId ? backlogColor : defaultBacklogColor}">
            <a @click="learnTheCourse(item.id, item.type)">
                <div class="active-img" v-if="item.id === learnId">
                    <img src="~/assets/img/play_circle.svg" alt="" v-if="item.type === 'video'">
                    <img src="~/assets/img/article_circle.svg" alt="" v-else-if="item.type === 'article'">
                    <img src="~/assets/img/quiz_circle.svg" alt="" v-else>
                </div>
                <div v-else>
                    <img src="~/assets/img/play_circle.svg" alt="" v-if="item.type === 'video'">
                    <img src="~/assets/img/article_circle.svg" alt="" v-else-if="item.type === 'article'">
                    <img src="~/assets/img/quiz_circle.svg" alt="" v-else>
                </div>
              <span class="title three-white-space" :style="{'color': item.id === learnId ? color : defaultColor}">{{item.title}}</span>
            </a>
            <span class="times" :style="{'color': item.id === learnId ? color : defaultColor}">{{ item.length }}</span>
          </li>
        </ul>
      </div>

样式

    .lesson-list {
      border: 0.0625rem solid #000;
      ul {
        li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 3.9375rem;
          margin: 0.53125rem 1.25rem;
          box-sizing: border-box;
          a {
            display: flex;
            align-items: center;
            color: #000;
            cursor: pointer;
            img {
              display: block;
              width: 1.5rem;
              height: 1.5rem;
              margin-right: 0.75rem;
            }
            .title{
              max-width: 17.1875rem;
              font-size: 0.875rem;
              line-height: 150%;
            }
            @media (max-width: 768px) {
              .title {
                max-width: 12rem;
              }
            }
          }
          .times {
            margin-left: auto;
            font-size: 0.875rem;
            line-height: 1.3125rem;
          }
        }
      }
    }

#重点是这里
.active-img{
    overflow: hidden;
    img {
        filter: drop-shadow(1.5rem 0 0 #007BE5);
        transform: translateX(-1.5rem);
    }
}