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

在框中提供的示例中，切换（激活）相邻按钮时，阴影从一个按钮重叠到另一个按钮

每个按钮的框阴影仅为：

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

---

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

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

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

box阴影：0.2rem rgb（194198202）

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

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

---

这样做会在复选框3的顶部显示复选框2的框阴影对于双重注释，我想我会显示我的意思：。那么你想要一个不与相邻按钮重叠的框阴影吗？这只涉及css规则中的一条，但我想你会理解我所做的。这很好，我可以从这里把它应用到其他规则中。不知道可以向元素添加两个不同的长方体阴影。再次感谢您抽出时间。