在Safari中切掉了Box-Shadow

Question

我遇到了在Safari中切断阴影的问题，但在Chrome中很好。我试过“溢出：可见”，但这不起作用。见下面的链接。

li {
  background: #f7f7f7;
  width: 400px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  background: transparent;
  height: 140px;
  max-width: 100px;
  overflow: visible;
  /* thought this should work  */
  padding: 0;
  border: no;
}

img {
  width: 100%;
  height: auto;
  box-shadow: rgba(45, 45, 45, 0.1) 0px 2px 4px, rgba(49, 49, 49, 0.04) 0px 4px 6px, rgba(42, 42, 42, 0.1) 0px 8px 10px, rgba(32, 32, 32, 0.04) 0px 16px 18px, rgba(49, 49, 49, 0.1) 0px 32px 32px, rgba(35, 35, 35, 0.1) 0px 64px 64px;
}

<li>
  <button type="button">
      <img src="https://placeimg.com/600/400/any">
	  </button>
</li>

codepen

谢谢！

Answer 1

代替div标签，使用div标签就像魅力一样。

<li>
  <div>
      <img src="https://placeimg.com/600/400/any">
  </div>
</li>