css - 在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

而不是button标记，使用div标记的工作方式类似于charm。

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