box-shadow和drop-shadow实现不规则投影实例代码

首先我们来了解一下box-shadow和drop-shadow两种方式实现阴影的不同之处：

• box-shadow属性是在目标元素的边框外侧形成一个矩形的投影效果。
• drop-shadow属性是在目标元素和背景之间产生一个投影效果，投影效果是会根据目标元素的不规则形状进行调整的。

接下来我们分别来看一下如何使用box-shadow和drop-shadow实现不规则投影。

使用box-shadow实现不规则投影

首先，我们需要一个具有不规则形状的目标元素，比如一个圆形元素。然后使用box-shadow属性为其添加阴影，同时通过一些微调来实现不规则投影效果。

示例代码如下：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5), 0px 0px 10px rgba(0, 0, 0, 0.5);
}

上述代码中box-shadow属性的第一个参数0px 10px 20px rgba(0, 0, 0, 0.5)表示水平方向上阴影的偏移量为0px，垂直方向上的偏移量为10px，模糊距离为20px，阴影颜色为黑色，透明度为0.5。第二个参数0px 0px 10px rgba(0, 0, 0, 0.5)表示水平方向上阴影的偏移量为0px，垂直方向上的偏移量为0px，模糊距离为10px，阴影颜色为黑色，透明度为0.5。

通过这样的设置，我们就能够实现一个具有不规则投影效果的圆形元素。

使用drop-shadow实现不规则投影

接下来，我们来看一下如何使用drop-shadow属性实现不规则投影。与上述方法不同的是，我们不需要为目标元素做额外的微调，因为drop-shadow属性会根据目标元素的不规则形状自动进行调整。

示例代码如下：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.5));
}

上述代码中的filter属性是CSS3新特性，用于对元素进行滤镜处理。drop-shadow函数接受多个参数，分别对应水平方向、垂直方向、模糊距离、阴影颜色和透明度。与box-shadow属性不同的是，drop-shadow属性只接受一个参数，表示整个阴影效果，而不是多个参数组成的列表。

通过上述两个示例，我们已经了解了如何通过box-shadow和drop-shadow属性实现不规则投影效果。在实际开发中，我们可以根据具体的需求选择不同的方法实现不同的效果。