css - 如何使按钮具有透明边框，将显示下面元素的背景

Question

我想要我必须在悬停时添加边框的按钮；但是，我这样做会导致其他元素移动，我不喜欢这样。我尝试使用透明边框来解决这个问题；但是，这只会显示按钮的背景颜色。我希望它只显示按钮，然后边框应该什么都没有，无论背景下方的元素是什么，然后如果我悬停我希望它也显示一个边框，它会破坏按钮的圆形外观

标签： css

Answer 1

您只看到按钮背景的原因是因为设置透明边框会删除默认情况下按钮上的现有边框样式。您可以使用没有任何模糊的盒子阴影。下面将给出一个 4px 的红色边框，而不影响框的大小。

button:hover{box-shadow: 0px 0px 0px 4px red;}