<div id="app">
  
</div>

body{
  height:100vh;
  background:yellowgreen;
}
.box{
  width:100px;
  height:100px;
  border:3px solid rgba(255,0,0,.5);
  box-shadow:10px 5px 0 0 rgba(0,0,0,.5);
  background:transparent;
}

function App(){
  const [value1,changeValue1] = React.useState(0)
  const [value2,changeValue2] = React.useState(0)
  const boxShadow = React.useMemo(()=>{
    return {
      'box-shadow':`10px 5px ${value1}px ${value2}px rgba(0,0,0,.5)`
    }
  },[value1,value2])
  const onChange1 = (e)=>{
    changeValue1(e.target.value)
  }
  const onChange2 = (e)=>{
    changeValue2(e.target.value)
  }
  return (
    <div>
      <div style={boxShadow} className="box"></div>
      <div>
        <input type="range" value={value1} onChange={onChange1} min="0" max="10"/>
        <span>改变模糊半径</span>
        <span>{value1}</span>
      </div>
      <div>
        <input type="range" value={value2} onChange={onChange2} min="0" max="10"/>
        <span>改变扩散半径</span>
        <span>{value2}</span>
      </div>
    </div>
  )
}

ReactDOM.render(<App/>,document.getElementById('app'))