记css3属性filter写阴影搭配will-change提高渲染性能

1.filter属性主要用于为图像或元素应用各种视觉效果，如模糊、亮度、对比度调整等。

filter: drop-shadow(h-shadow v-shadow blur spread color);
filter: drop-shadow(0 0 5px #646cffaa);

• h-shadow 和 v-shadow：分别设置阴影在水平方向和垂直方向上的偏移量。正值将阴影向右和向下移动，负值将阴影向左和向上移动。
• blur：设置阴影的模糊程度。值越大，阴影的边缘就越模糊。
• spread：设置阴影的大小。正值会扩大阴影，负值会缩小阴影。
• color：设置阴影的颜色。

2.will-change属性用于预先通知浏览器元素即将发生的变化，以便浏览器能够提前准备这些变化，从而优化渲染性能

当你知道某个元素即将发生变化时（例如，它的位置、大小、内容或可见性），使用will-change属性可以帮助浏览器更有效地进行渲染。
这个属性接受多个值，可以是一个或多个CSS属性的名称，这些属性表示即将发生变化的属性。例如，如果你知道一个元素即将改变其位置或透明度，你可以这样写：

.element {
  will-change: transform, opacity;
}  

在这个例子中，浏览器会知道.element即将改变其位置（通过transform）和透明度（通过opacity），因此可以提前进行必要的优化

3.综合使用

告知浏览器route这个元素将会有hover渲染阴影的效果，时间是300ms，提前做好准备。

.route {
    width: 60%;
    border: 1px solid red;
    display: flex;
    align-items: center;
    will-change: filter;
    transition: filter 300ms;

    &:hover {
      filter: drop-shadow(0 0 5px #646cffaa);
    }
  }