Css 将边框颜色添加到“范围”按钮中

我使用离子范围添加一个范围滑块，并想添加一个范围旋钮边框。因为它的ionic4和范围旋钮是阴影dom的一部分，所以我不能使用范围旋钮的border属性直接更改边框。我已经附上了我试图实现的图像。在范围旋钮周围有一个白色边框。现有属性只有一个接近我的要求的框阴影属性，但仍然不能给出与图像完全相同的结果。如何在旋钮上添加边框

试试这个：

page.scss

ion-range{
    --knob-background: #02a7de;
    --bar-background-active: #02a7de;
    --bar-background: #02a7de;
    --bar-height: 6px;
    --knob-size: 18px;
    --knob-border-radius: 50%;
    --bar-border-radius: 20px;
    --knob-box-shadow: 0px 0px 0px 3px #fff;
}

试试这个：

page.scss

ion-range{
    --knob-background: #02a7de;
    --bar-background-active: #02a7de;
    --bar-background: #02a7de;
    --bar-height: 6px;
    --knob-size: 18px;
    --knob-border-radius: 50%;
    --bar-border-radius: 20px;
    --knob-box-shadow: 0px 0px 0px 3px #fff;
}