CSS阴影

分类

box-shadow： 盒子阴影
text-shadow： 文本阴影
drop-shadow ： 符合图像本身形状(alpha通道)的阴影。

两者的使用一致，下面以盒子阴影为例

box-shadow

语法

box-shadow: h-shadow v-shadow blur spread color inset;

属性

前5个是最常用的

注意点：

• 设置阴影位置时，阴影的起始位置是盒子的左上角
• 阴影的默认大小与盒子大小相同，spread类似于边框，在阴影加上一圈边框
• 阴影可以重复添加

实例： 设置4个阴影围在div盒子的外面，构成一圈

<template>
    <div class="container">
        <div class="shadow"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    mounted() {},
    methods: {}
};
</script>

<style scoped lang="scss">
$color: #e91e63;

.container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shadow{
    width: 120px;
    height: 100px;
    background: pink;

    //设置阴影
    box-shadow: -10px -10px 0 2px $color , 10px -10px 0 2px $color,
                 -10px 10px 0 2px $color , 10px 10px 0 2px $color;
}
</style>

实例： 在上面的基础上实现动态边框的效果

<template>
    <div class="container">
        <div class="shadow"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    mounted() {},
    methods: {}
};
</script>

<style scoped lang="scss">
$color: #e91e63;

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shadow {
  width: 120px;
  height: 100px;
  background: pink;

 //坐上位置 -50px -50px 0 2px $color
 //右上位置 50px -50px 0 2px $color
 //右下位置 50px 50px 0 2px $color
 //左下位置 -50px 50px 0 2px $color


  //设置阴影
  box-shadow: -50px -50px 0 2px $color,50px -50px 0 2px $color,50px 50px 0 2px $color,-50px 50px 0 2px $color;
  &:hover {
    animation: border 2s ease forwards;
  }
}

@keyframes border {
  0%{
      box-shadow: -50px -50px 0 2px $color,50px -50px 0 2px $color,50px 50px 0 2px $color,-50px 50px 0 2px transparent;
  }
  25%{
      box-shadow: 50px -50px 0 2px $color,50px 50px 0 2px $color,-50px 50px 0 2px $color,-50px -50px 0 2px red;
  }
  50%{
       box-shadow:50px 50px 0 2px $color,-50px 50px 0 2px $color,-50px -50px 0 2px $color,50px -50px 0 2px red;
  }

  75%{
      box-shadow:-50px 50px 0 2px $color,-50px -50px 0 2px $color,50px -50px 0 2px $color,50px 50px 0 2px red;
  }

  100%{
      box-shadow:  -50px -50px 0 2px $color,50px -50px 0 2px $color,50px 50px 0 2px $color,-50px 50px 0 2px red
  }
}
</style>

哈哈哈，效果跟想象的不太一样。原理就是设置4个阴影，围成一圈，当鼠标悬浮时修改每个阴影的位置，形成类似旋转的效果。
难点在于阴影的位置

drop-shadow

这个属性是基于滤镜(filter)的，目前用不到，对这个感兴趣的可以看一下大佬的这篇文章

CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果

推荐

Box-shadow实现圆环进度条动画

效果

阴影动画优化

看到了一篇这个文章：CSS 阴影动画优化技巧一则，感兴趣的可以看看。

文章中的例子如下：

 <div class="content"></div>

.content {
  width: 240px;
  height: 160px;
  background: white;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    border-radius: 10px;
  }
  &:hover::before {
    opacity: 1;
  }
}

效果：