CSS滤镜DropShadow属性(设置阴影)

2012/11/25 11:17:14作者：佚名来源：网络

移动端

【实例介绍】

dropShadow滤镜是为了添加对象的阴影效果。它实现的效果就像使原来的对象离开页面，然后在页面上显示出该对象的投影。其工作原理是建立一个偏移量，加上色彩。

【基本语法】

dropshadow (color=阴影颜色， offx=参数值，offY=参数值， positive=参数值)

【语法介绍】

color：用于控制阴影的颜色。
offX和offY：分别设置阴影相对于原始图像移动的水平距离和垂直距离。
positive：设置阴影是否透明。

【实例代码】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.y {
filter: dropShadow(color=#3366FF, offX=2, offY=1, positive=1);
font-size: 18px;
color: #ff33ff;
}
</style>
</head>
<body>
<table width="263" height="30" border="0" align="center" 
cellpadding="0" cellspacing="0" class="y">
<tr>
<td align="center">设置阴影dropShadow</td>
</tr>
</table>
</body>
</html>

【代码分析】

在代码中，filter：dropShadow(color=#3366FF，offX=2，offY=l，positive=1)用来设置阴影．在浏览器中预览效果，如图所示。

设置阴影dropShadow运行效果
【素材及源码下载】