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>

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