重新构思的标题：如何只对盒子阴影应用溢出效果-PHP中文网问答

我正在尝试构建一个输入范围滑块条，但是我遇到了一个问题。

body {
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #151515;
}
#rangeValue {
    position: relative;
    display: block;
    font-size: 6em;
    color: #999;
    font-weight: 400;
}
.range {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important;
    width: 400px;
    height: 5px;
    -webkit-appearance: none;
    background: #111;
    outline: none;
    border-radius: 15px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}
.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: blue;
    cursor: pointer;
    box-shadow: -507px 0 0 500px red;
}

<div>
    <span id="rangeValue">0</span>
    <Input class="range" type="range" name "" value="0" min="0" max="1000"></Input>
</div>

问题是：我希望这个大红色区域在绘制时仍然保持在输入滑块内。唯一的解决方案是将overflow: hidden应用于.range，但我将失去蓝点按钮。是否有一种方法可以仅将overflow: hidden应用于box-shadow？或者有其他方法使其正常工作的线索吗？

最终结果应该是这样的 =>

final result

谢谢。