Fox CSS Internet Explorer 中的阴影问题

Question

我在网页上设计了特色框，并使用 CSS 在底部添加了阴影。它在 Chrome 和 Firefox 中看起来不错，但当我检查 IE 11 时，它看起来不太好。

上图来自其他浏览器，下图是IE 11上的样子

我使用下面的 CSS 代码添加了阴影：

.service_group:hover .uk-box-shadow-bottom:before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    border-radius: 100%;
    background: #000;
    filter: blur(20px);
}

有没有办法去掉IE中的纯黑色阴影？我了解到我可以为 IE 添加 CSS 样式表并覆盖其中的 CSS 代码。但这似乎有点矫枉过正。有更简单的方法吗？

Answer 1

在现代浏览器中可以获取CSS来测试浏览器是否支持过滤器。 @support 在 IE 中不受支持，所以它只是忽略背景设置为黑色，所以它存在但看不到。

这是一个示例片段 - 显然没有得到您的代码将具有的所有正确大小。

<style>
  .service_group {}
  
  .uk-box-shadow-bottom {
    position: relative;
  }
  
  .service_group:hover .uk-box-shadow-bottom:before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    border-radius: 100%;
    /*background: #000;*/
    /*filter: blur(20px);*/
    height: 40px;
  }
  
  @supports (filter: blur()) {
    .service_group:hover .uk-box-shadow-bottom:before {
      background: #000;
      filter: blur(20px);
    }
  }
</style>
<div class="service_group">Just some info so I can hover
  <div class="uk-box-shadow-bottom"></div>
</div>

Answer 2

你可以试试方框阴影

.service_group:hover{
box-shadow: 3px 9px 35px 0px black;
}

并且还可以查看有多少浏览器支持这个属性

https://caniuse.com/?search=box-shadow

Fox CSS Internet Explorer 中的阴影问题

Fix CSS Shadow Issue in Interner Explorer

html

css

css-selectors