Question

我在弯曲的png上使用drop-shadow过滤器，它在除IE之外的任何其他浏览器中都能很好地工作。

点击此处的复选框：https://www.yogidia.com/builder （“瑜伽序列生成器3合1：”中的三个方框）

这是我的代码：

.curved::after {
    content: "";
    -webkit-filter: drop-shadow(0px 6px 3px rgba(0,0,0,0.12));
    filter: drop-shadow(0px 6px 3px rgba(0,0,0,0.12));
    width: 100%;
    display: inline-block;
    height: 40px;
    position: absolute;
    bottom: -39px;
    left: 0;
}

我需要帮助才能在IE中重现相同的效果。

我试过了

filter: progid:DXImageTransform.Microsoft.Shadow

和

filter: progid:DXImageTransform.Microsoft.DropShadow

但没有成功：/

Answer 1

为什么不使用box-shadow？以圆圈为例：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #3f0;
  box-shadow: 0px 5px 5px #888888;
}

<div class="circle"><div>

在你的例子中，使用底部图像并不是最好的方法，如果宽度有变化怎么办？这不是很敏感，我建议你使用它：

body {
  background-color: #ccc;
}

#box {
  position: relative;
  height: 250px;
  width: 150px;
  background-color: white;
  margin: 50px;
  z-index: 2;
}

#box::after {
  position: absolute;
  z-index: 3;
  content: "";
  width: 150px;
  height: 30px;
  background-color: white;
  bottom: -30px;
  border-radius: 00px 0px 50% 50%;
  border-top: 5px solid white;
  box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.2);
}

<div id="box"></div>

Answer 2

您可以对IE使用SVG过滤器。我已经使用IE10进行了测试。

div
{
	width:32px;
	line-height:32px;
	text-align:center;
	border-radius:50%;
	background:#4af;
	filter: url(#drop-shadow); /* set SVG filter */
}

<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="2.5"/>
        <feOffset dx="0" dy="0" result="offsetblur"/>
        <feFlood flood-color="#0f0"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

<div>A</div>

过滤Internet Explorer的drop-shadow

2 个答案: