为什么框形阴影和元素之间存在间隙? [英] Why are there gaps between the box-shadow and the element?

问题描述

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

When hovering over the button in Chrome (76.0.3809.100, 64-bit) faint gaps between the box-shadow and the img appear - why does this happen and how can I fix it?

以下是图片，以防您无法在代码段中看到它:

Here is an image in case you can't see it in the snippet:

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>

推荐答案

添加额外的插入框阴影以减小此影响:

Add an extra inset box-shadow to reduce this effect:

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旋转文本显示了一些背景问题.似乎任何形式的转换都会对box-shadow

A similar question: CSS rotated text with background shows some background-issues. Seems that any kind of transform create some issues with box-shadow

这篇关于为什么框形阴影和元素之间存在间隙?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！