Safari中的Box-Shadow截断

Question

我在Safari中遇到了框影被截断的问题，但在Chrome中很好。我尝试过"overflow: visible"，但这不起作用。请参阅下面的链接。

​

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标记而不是button标记，效果类似于charm。

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