Question

我创建了一个网页，并使用过滤器应用了投影效果，如下所示：

filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='gray', Positive='true');

这适用于IE 8和9，但在IE 11上不起作用。如何在现代浏览器中应用样式？

Answer 1

我使用了一种解决方法，因为微软没有真正的解决方案。

如果要向基本的矩形块元素添加阴影，请使用box-shadow。但是，您可能有一个更复杂的元素-例如三角形。

在这种情况下，您可以使用绝对伪元素或子元素来伪造效果。根据您需要的样式，使用转换后的框阴影，边框或从主要元素复制内容并将其缩放到下面，然后使用SVG对其进行模糊处理。

div {
    position: relative;
}

div:before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    box-shadow: 1px 1px 1px black;
    transform: rotate(45deg);
}

Answer 2

IE 10及更新支持text-shadow和box-shadow，因此您不再需要为它们应用任何特殊规则。

text-shadow: 2px 2px 0 gray

或

box-shadow: 2px 2px 0 gray

Answer 3

您正在使用Microsoft的专有过滤器。在较新的版本中使用标准CSS

 box-shadow: 1px 3px 5px #f00;

它的值是Xaxis Yaxis模糊颜色

为IE11投下阴影样式

3 个答案: