재구성된 제목: 상자 그림자에만 오버플로 효과를 적용하는 방법
<p>입력 범위 슬라이더 막대를 만들려고 하는데 문제가 발생했습니다. </p>
<p>
<pre class="brush:css;toolbar:false;">본체 {
내용 정당화: 센터;
항목 정렬: 중앙;
최소 높이: 100vh;
배경: #151515;
}
#범위값 {
위치: 상대;
디스플레이: 블록;
글꼴 크기: 6em;
색상: #999;
글꼴 두께: 400;
}
.범위 {
배경: 선형 그라데이션(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !중요;
너비: 400px;
높이: 5px;
-웹킷 모양: 없음;
배경: #111;
개요: 없음;
테두리 반경: 15px;
상자 그림자: 삽입 0 0 5px rgba(0, 0, 0, 1);
}
.range::-webkit-slider-thumb {
-웹킷 모양: 없음;
너비: 15px;
높이: 15px;
테두리 반경: 50%;
배경: 파란색;
커서: 포인터;
상자 그림자: -507px 0 0 500px 빨간색;
}</pre>
<pre class="brush:html;toolbar:false;"><div>
<span id="rangeValue">0</span>
<Input class="range" type="range" name "" value="0" min="0" max="1000"></Input>
</p>
<p>문제는 그릴 때 이 큰 빨간색 영역이 입력 슬라이더 내에 남아 있기를 원한다는 것입니다. 유일한 해결책은 <code>overflow:hidden</code>을 <code>.range</code>에 적용하는 것입니다. 하지만 파란색 점 버튼이 사라집니다.
<code>overflow:hidden</code>을 <code>box-shadow</code>에 적용할 수 있는 방법이 있나요? 아니면 작동하게 만드는 다른 방법에 대한 단서가 있나요? </p>
<p>최종 결과는 다음과 같습니다 =></p>
<p><img src="/uploads/20230822/169264211664e3ab441b49a.png" alt="최종 결과 " /></p>
<p>감사합니다. </p>
