IE11 - border-radius和box-shadow一起导致问题

Question

遵循我的准则:

div{
  display: block;
  width: 500px;
  height: 200px;
  border: 1px solid black;
  border-radius: 5px;
  transition: box-shadow 1s;
}

div:hover{
    box-shadow: 25px 25px 0px #000;
}

<div>Test</div>

它可以在Chrome,Safari和Firefox上运行,但在Internet Explorer 11上运行效果不佳,当div不再关注时会出现明显的视觉问题.怎么解决？

JSFiddle:https://jsfiddle.net/aL0t8g21/

Answer 1

更新以使其变得更好。

根据您的评论请求，这是您使用或您的 div 的解决方法。:after:before

div {
  display: block;
  width: 500px;
  height: 200px;
  border: 1px solid black;
  border-radius: 5px;
  transition: box-shadow 1s;
  position: relative;
  background: #fff;
}

div:after {
  content: '';
  display: block;
  position: absolute;
  width: 500px;
  height: 200px;
  border-radius: 5px;
  background: #000;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 1s ease-in-out;
  z-index: -1;
}

div:hover:after {
  left: 25px;
  top: 25px;
  opacity: 1;
}

<div>Test</div>

jsfiddle

这在 IE 11 中运行良好。