css - 复选框按钮组中相邻事件按钮上的重叠框阴影

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