css多层边框使用多层阴影实现修改shopify 变体 商品属性 variant 修改实现

我们在开发的时候经常会需要实现很多环形嵌套，圆形嵌套，或者是多边框，多层不同颜色边框嵌套的效果。方形的可以用outline 和border来增加。
但是outline在大部分的浏览器不支持圆角，只有火狐浏览器使用火狐的前缀，-moz- outline-radius
 

遇到这种圆形嵌套，最里边的商品颜色，商品颜色的边框。选中以后的白色圆圈和白色圆圈的边框。这个时候用 box-shdow就可以完美解决这个问题。但是需要注意的是shdow阴影是占用布局空间的，所以需要用margin来撑开一下上下左右的间距。

修改shopify 变体 商品属性 product.variant 

.product-form__input input[type=radio]:checked+label{
                    width: 24px;
                    height: 24px;
                    border: 1px solid #888888;
                    border-radius: 50%;
                    position:relative;
                    box-shadow: 0 0 0 5px #fff, 0 0 0 6px #888;
              
                  }