CSS阴影

分类

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

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

box-shadow

语法

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

属性

前5个是最常用的

注意点：

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

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

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

哈哈哈，效果跟想象的不太一样。原理就是设置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;
  }
}

效果：