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

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);  
}