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

Question

遵循我的守则：

＆＃13;

＆＃13;

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;
}

＆＃13;

<div>Test</div>

＆＃13;

＆＃13;

＆＃13;

适用于Chrome，Safari和Firefox，但在Internet Explorer 11上效果不佳，当div不再关注时会出现明显的视觉问题。如何解决？

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

Answer 1

更新以使其更好。

根据您的评论请求，您可以使用:after或:before div来获取解决方法。

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中运行良好。