为什么框形阴影和元素之间存在间隙？

Question

将鼠标悬停在Chrome（76.0.3809.100，64位）中的按钮上时，框阴影和img之间会出现微弱的间隙-为什么会发生这种情况，我该如何解决？

以下是图片，以防您在摘要中看不到它：

body {
  background-color: firebrick;
}

button {
  all: unset;
  height: 200px;
  width: 200px;
  overflow: hidden;
}

button:hover > img {
  transform: scale(1.15);
}

button > img {
  height: 70%;
  margin: auto;
  display: block;
  box-shadow: 0 0 0 50px #fff;
}

<button><img src="https://thewthr.app/img/search.png"></button>

Answer 1

添加额外的插入框阴影以减少此影响：

body {
  background-color: firebrick;
}

button {
  all: unset;
  height: 200px;
  width: 200px;
  overflow: hidden;
}

button:hover > img {
  transform: scale(1.15);
}

button > img {
  height: 70%;
  margin: auto;
  display: block;
  box-shadow: 
   0 0 0 50px #fff,
   0 0 0 2px #fff inset;
}

<button><img src="https://thewthr.app/img/search.png"></button>

一个类似的问题：CSS rotated text with background shows some background-issues。似乎任何形式的转换都会给box-shadow

带来一些问题