复选框按钮组中相邻活动按钮上的重叠框阴影

Question

当在https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons中提供的示例中切换（激活）相邻按钮时，框阴影从一个按钮重叠到另一个按钮。

每个按钮的框阴影只是：

box-shadow: 0 0 0 0.2rem rgba(134,142,150,.5)

有没有办法可以防止这种情况发生？它看起来很破碎，特别是当两个以上的按钮相邻时。

Answer 1

如果您希望框阴影重叠为一致的颜色，则可以执行以下操作：

box-shadow: 0 0 0 0.2rem rgb(194,198,202)

如果您不希望框阴影重叠，可以执行以下操作：

.btn-secondary:not([disabled]):not(.disabled).active {
  box-shadow:
    0 -0.2rem rgba(134,142,150,.5),
    0 0.2rem rgba(134,142,150,.5);   
}

label.btn-secondary:not([disabled]):not(.disabled).active:first-child {
  box-shadow:
    -0.2rem 0 0  0.2rem rgba(134,142,150,.5);   
}

label.btn-secondary:not([disabled]):not(.disabled).active:last-child {
  box-shadow:
    0.2rem 0 0  0.2rem rgba(134,142,150,.5);  
}