CSS3过滤器，过渡在IE和Safari上不起作用

Question

正如您在跑步时在代码段中所能看到的，我有一个盒子，下面有种阴影，如果我将鼠标悬停在盒子上，阴影就会变大。

 .container{ min-height: 400px; overflow: auto; clear: both; background: red; } .content { max-width: 100%; width: 441px; float: left; text-align: center; position: relative; z-index: 2; } .content:after { content: ''; position: absolute; bottom: -10px; left: 7px; right: 0; margin: 0 auto; width: 228px; height: 48px; border-radius: 50%; background: #000; opacity: 0.5; -webkit-filter: blur(25px); -o-filter: blur(25px); -webkit-transform: scale(1, 0.3); -o-transform: scale(1, 0.3); } .content:hover:after { width: 350px; height: 80px; transition: all .8s; -webkit-transition: all .8s; -o-transition: all .8s; -moz-transition: all .8s; } 

 <div class="container"> <div class="content"> <h3>Find Your</h3> <div class="main_content"> <h3>Nearest</h3> <p>Fryking</p> </div> </div> </div> 

如何在所有浏览器上都可以使用此功能？ 目前，我仅在chrome和firefox上看到它。 当我转到IE和Safari时，我的代码不起作用。

这是在chrome上的外观：

以及在Safari和IE上的外观：

希望你能帮忙

Answer 1

在MDN网站上，它表示IE当前不支持过滤器CSS属性，而且很遗憾，我看不到解决此问题的方法。 MDN CSS过滤器

但是有2种选择

1. 使用具有圆形渐变透明度（如.png）的图片。 您需要使用Adobe Photoshop之类的软件来创建它，或者在网上找到它。 然后，您可以将其用作CSS中的背景图像。

2. 在CSS中使用径向渐变作为背景。 （有很多网站可以生成它）适用于：

   背景：径向渐变（rgba（0,0,0,1），rgba（0,0,0,0））

（需要-o- -moz- -webkit-才能在不同的浏览器中提供支持）

最后设置背景大小：100％100％