IE7和IE8中的盒子阴影

Question

我希望在IE7和IE8中实现盒子阴影效果。我已经尝试了各种方法但都没有成功。这是我用来给一个div添加彩色阴影的CSS代码：

.bright{
    position: absolute;
    z-index: 1; 
    -moz-box-shadow: 0px -3px 55px 20px #147197;
    box-shadow: 0px -3px 55px 20px #147197;
    -webkit-box-shadow: 0px -3px 55px 20px #147197;
    behavior: url(ie-css3.htc);
}

这个ie-css3.htc文件可以解决IE阴影问题。但是它只提供黑色阴影，而不是彩色阴影。我尝试过：

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=100, Strength=13);

但它创建了一个方向性阴影，我想要一个全向阴影。我也尝试了模糊滤镜，但它需要额外的div，在我的当前情况下不建议使用。对于这个问题有什么专家意见吗？

- Shades88

---

box-shadow在IE9中受支持，在IE8及更早版本中不需要。停止使用愚蠢的hack，因为它们只会使那些使用旧浏览器的可怜用户的用户体验更糟糕。 - c69

CSS3PIE在旧版IE中表现良好，确实提升了用户体验。 - nickb

@c69 运行正常。尝试使用最低规格直接从 Microsoft 运行 Vista/IE7 虚拟机并亲自试一下。 - nickb

如果你在企业环境中工作，就不能随意决定哪些东西要交付，哪些不需要。如果有要求说必须在IE7中添加投影效果，那么作为开发人员，你就需要想办法实现。我无法想象回到客户那里并说：“抱歉，我知道您需要这个功能，但我认为您的用户不需要它，所以我没有做。” - hardba11

离题：@ColoradoRockie，有很多网页开发工作，企业并不总是意味着“我的老板是笨蛋”。你作为专家的角色是为客户做最好的事情，当他坚持要向自己的脚开枪时 - 你的义务至少是告知他所有不幸的后果。 - c69

Answer 1

使用CSS3 PIE，模拟在旧版本的IE中支持某些CSS3属性。

它支持box-shadow（除了 inset 关键字）。

- thirtydot

---

如果您绝对需要为Internet Explorer 5.5到8提供插入式盒子阴影，请查看下面我的高级方法，使用纯CSS（无JavaScript）完整代码示例。 - oatmealNUGGY

Answer 2

在IE8中，你可以尝试：

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#c0c0c0')";
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#c0c0c0');

注意：在IE8中，由于某种原因，您将失去平滑字体，它们看起来会很粗糙。

- iamari

---

我正在使用来自Google字体的自定义字体，我没有看到您提到的字体平滑度的损失。另外，我只需要filter:而不是-ms-filter。 - Justin

有没有办法让阴影出现在三个方向，比如左边、右边和底部，而不仅仅是两个方向？ - Justin

Answer 3

您可以尝试这个。

box-shadow:
progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=10, Color='#19000000'), 
progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=20, Color='#19000000'), 
progid:DXImageTransform.Microsoft.dropshadow(OffX=20, OffY=30, Color='#19000000'), 
progid:DXImageTransform.Microsoft.dropshadow(OffX=30, OffY=40, Color='#19000000');

- user2795385

Answer 4

使用此代码来解决阴影框问题

filter: progid:DXImageTransform.Microsoft.dropShadow (OffX='2', OffY='2', Color='#F13434', Positive='true');

- Kumar vaibhav