filter:drop-shadow有方向的阴影使用说明

下面是关于“filter:drop-shadow有方向的阴影使用说明”的完整攻略。

什么是filter:drop-shadow？

首先，我们需要了解filter:drop-shadow属性。它是CSS3中的一个滤镜属性，可以给元素添加阴影效果。

语法如下：

box-shadow: [inset] [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color];

其中，inset、horizontal-offset、vertical-offset、blur-radius和color是必选参数，而spread-radius则是可选参数。

如何让阴影有方向？

接下来，我们要讲的就是如何让阴影有方向。使用filter:drop-shadow属性就可以实现，具体的写法如下：

filter: drop-shadow([horizontal-offset] [vertical-offset] [blur-radius] [color]);

在这里，我们只需要为filter:drop-shadow属性指定horizontal-offset和vertical-offset两个参数即可实现阴影方向的控制，这里的horizontal-offset和vertical-offset的单位可以是px、em、rem、%等CSS支持的长度单位。

以下是两个示例：

示例一

让一个文本框右下方有阴影：

<div style="width: 180px; height: 50px; padding: 10px 20px; background-color: #fff; filter: drop-shadow(3px 3px 3px #666);">这是一个文本框</div>

上面代码中，我们为文本框（div元素）增加了一个阴影，使它在显示时右下方会有阴影效果。

示例二

让一个图片左上方有阴影：

<img src="http://example.com/image.jpg" alt="图片" style="filter: drop-shadow(-3px -3px 3px #666);">

上面代码中，我们为图片增加了一个阴影，使它在显示时左上方有阴影效果。

总结

通过以上介绍，我们可以看出，使用filter:drop-shadow属性很容易就可以控制阴影的方向。只需要为该属性设置horizontal-offset和vertical-offset两个参数即可实现。