当我在Chrome dev工具中将屏幕尺寸设置为较小时，或者当我在手机上查看我的项目时，当我点击按钮时，按钮周围会暂时出现一个蓝色方块.我曾try 将outline: none或outline: 0设置为button、button:hover、button:focus和button:active以防止出现这种情况，但没有明显的变化.我判断了Chrome dev工具中的样式，但我不知道这个蓝色方块是从哪里来的，也不知道如何删除它或使其不可见.欢迎任何帮助.
这是我的HTML码:
<button>
<span class="dice-wrapper">
<img src="./src/assets/icon-dice.svg" alt="Dice icon">
</span>
</button>
这是我的css:
button {
width: 64px;
aspect-ratio: 1 / 1;
display: flex;
justify-content: center;
align-items: center;
border: none;
border-radius: 50%;
background-color: var(--neon-green);
}
button:hover {
cursor: pointer;
box-shadow: 0 0 40px 3px var(--neon-green);
}
button:focus, button:active {
box-shadow: none;
}
GitHub上的完整代码:https://github.com/Marjolein-Kasman-de-Jong/advice-generator-app
GitHub页面上的项目:https://marjolein-kasman-de-jong.github.io/advice-generator-app/