CSS3中的drop-shadow()方法，用来实现阴影滤镜效果。

语法：

filter: drop-shadow(x-offset y-offset blur color)

说明：

drop-shadow()方法的参数有4个，每一个参数说明如下。

  • （1）x-offset：定义水平阴影的偏移距离，可以使用负值。由于CSS3采用的是W3C坐标系，因此x-offset取值为正时，向右偏移；取值为负时，向左偏移。
  • （2）y-offset：定义垂直阴影的偏移距离，可以使用负值。由于CSS3采用的是W3C坐标系，因此y-offset取值为正时，向下偏移；取值为负时，向上偏移。
  • （3）blur：定义阴影的模糊半径，只能为正值。
  • （4）color：定义阴影的颜色。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #after
        {
            filter:drop-shadow(5px 5px 10px red);
        }
    </style>
</head>
<body>
    <div id="before">
        <img src="img/princess.png" alt="">
    </div>
    <div id="after">
        <img src="img/princess.png" alt="">
    </div>
</body>
</html>

浏览器预览效果如下图所示。