当将鼠标悬停在 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>
添加额外的内嵌框阴影以减少这种影响：
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 旋转文本显示一些背景问题 https://stackoverflow.com/q/57094587/8620333。似乎任何类型的转换都会产生一些问题box-shadow
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
