使用CSS3配合IE滤镜实现渐变和投影的效果

1、CSS3配合IE滤镜实现渐变的效果

实现方法如下：

• 首先，我们需要使用linear-gradient()或radial-gradient()创建CSS渐变。例如，background: linear-gradient(to bottom, #000, #fff);
• 然后，为了支持IE浏览器，我们需要添加IE滤镜progid:DXImageTransform.Microsoft.gradient()。例如，filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', GradientType=0);。其中，startColorstr表示渐变的起始颜色，endColorstr表示渐变的结束颜色，GradientType=0表示线性渐变。
• 最后，我们需要在CSS中设置background-image:none\9;，以避免IE8及以下版本的浏览器无法处理CSS3渐变，从而使用滤镜。\9表示只有IE浏览器会识别此语句。

示例代码：

.gradient {
  background: #000000;
  background: linear-gradient(to bottom, #000000, #ffffff);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', GradientType=0);
  background-image:none\9; /* 渐变背景 */
}

2、CSS3配合IE滤镜实现投影的效果

实现方法如下：

• 首先，我们需要使用CSS3中的box-shadow属性创建投影效果。例如，box-shadow: 2px 2px 2px #000;表示创建一个水平偏移量为2px、垂直偏移量为2px、模糊度为2px、阴影颜色为#000的投影效果。
• 然后，为了支持IE浏览器，我们需要添加IE滤镜progid:DXImageTransform.Microsoft.Shadow()。例如，filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#000000,strength=2);。其中，direction表示投影的角度，color表示投影的颜色，strength表示投影的模糊度。
• 最后，我们需要在CSS中设置zoom:1，以创建IE6的HasLayout属性。

示例代码：

.shadow {
  box-shadow: 2px 2px 2px #000;
  filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#000000,strength=2);
  zoom:1; /* 投影效果 */
}

以上就是使用CSS3配合IE滤镜实现渐变和投影的完整攻略。需要注意的是，在使用IE滤镜时需要使用固定的语法规则，否则可能会出现兼容性问题。