在按钮边界称呼旁边的按钮背景

Question

我有两个按钮彼此相邻。其中一个具有背景，另一个具有带边框的透明背景。问题是边框在视觉上位于按钮外部，使其略大于主按钮。

我已经搜索并遇到过很多解决方案，但我的问题是解决这个问题的最佳做法是什么？

谢谢！

Answer 1

使用$

box-sizing

这样填充边框就在里面。

Answer 2

您有两个选项，一个是使用轮廓和轮廓偏移，如下所示：

button{
 outline: 1px solid red;
 outline-offset: -1px;
}

或者您可以使用插入框阴影，如下所示：

button{
 box-shadow: inset 0px 0px 1px red;
}