简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  問答  >  主體

重新構思的標題：如何只對盒子陰影套用溢出效果

<p>我正在嘗試建立一個輸入範圍滑桿條，但是我遇到了一個問題。 </p> <p> <pre class="brush:css;toolbar:false;">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; }</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> </div></pre> </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=" final result " /></p> <p>謝謝。 </p>
P粉391677921P粉391677921436 天前572

全部回覆(1)我來回復

  • P粉387108772

    P粉3871087722023-09-04 12:20:01

    我不確定這是否有幫助，但這是我進行的重構。也許你可以做一些修改以適應你的任務。

    HTML

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Slider</title>
</head>
<body>
    <div>
    <span id="rangeValue">0</span>
    <Input type="range" name="" id="range" value="0" min="0" max="100"></Input>
</div>
</body>
  
  <script src=""></script>
</html>

    CSS

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

/* Input Thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #ff4500;
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 #555;
  transition: background .3s ease-in-out;
}

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #ff4500;
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 #555;
  transition: background .3s ease-in-out;
}

input[type="range"]::-ms-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #ff4500;
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 #555;
  transition: background .3s ease-in-out;
}


/* Input Track */
input[type=range]::-webkit-slider-runnable-track  {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

input[type=range]::-moz-range-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

    JS

    const rangeInputs = document.querySelectorAll('input[type="range"]')

function handleInputChange(e) {
  let target = e.target
  if (e.target.type !== 'range') {
    target = document.getElementById('range')
  }
  
  const min = target.min
  const max = target.max
  const val = target.value
  
  target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%'
}

rangeInputs.forEach(input => {
  input.addEventListener('input', handleInputChange)
})

    你可以依照自己的喜好進行調整。 希望這有幫助。

    回覆
    0
  • 取消回覆