带有圆角的React渐变滑块（额定分量）

Question

我是CSS和React的新手。 我的任务是制作一个如下图所示的组件。

这就是我用白色和不透明度（例如0.2）覆盖渐变div的结果。 颜色无关紧要。

您可以帮我像第一张图片一样在滑块内制作圆形边框吗？

添加缺少的代码。 我已经修改了本杰明的Reid示例。

这是我的代码：

 class MySlider extends React.Component { constructor(props) { super(props); this.state = { rating: this.props.rating || null, tempRating: null }; } rate = (rating) => { this.setState({ rating, tempRating: rating }); }; starOver = (rating) => { this.setState({ rating, tempRating: this.state.rating }); }; starOut = () => { this.setState({ rating: this.state.tempRating }); }; render() { const elements = []; for (let i = 0; i < 5; i++) { let cssSelectorClass = 'my-slider__item'; if (this.state.rating !== null && this.state.rating >= i) { cssSelectorClass += ' --selected'; } elements.push( <div className={cssSelectorClass} onClick={this.rate.bind(this, i)} onMouseOver={this.starOver.bind(this, i)} onMouseOut={this.starOut} /> ); } return ( <div> <div className="back" /> <div className="my-slider"> {elements} </div> </div> ); } } class App extends React.Component { render() { return <MySlider value={2} /> } } ReactDOM.render(<App />, document.getElementById('root')); 

 .my-slider { display: flex; position: relative; z-index: 1; } .my-slider__item { height: 30px; width: 30px; background-color: white; opacity: 0.8; } .my-slider__item:hover { cursor: pointer; } .--selected { opacity: 0; } .back { opacity: 0.5; background-image: linear-gradient(to right, blue, red); position: absolute; z-index: 0; width: 150px; height: 30px; background-color: #00ccff; border-radius: 0 20px 20px 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id='root'></div> 

EN / vNVwPW

Answer 1

没有代码，很难回答，特别是因为我们不知道您的组件是如何构建的。
无论如何，我只是“尝试并邀请”：让我知道这是否对您有帮助：

 class ProgressBar extends React.Component { constructor(props) { super(props); } render() { return ( <div className="progressBar"> <div className="currentProgress" style={{width: `calc(${this.props.value}%)`}}/> </div> ); } } class App extends React.Component { interval; constructor(props) { super(props); this.state = {value: 75}; } componentDidMount() { this.interval = setInterval(() => { this.setState({ value: Math.floor(Math.random() * (75-65+ 1) + 65)}); }, 500) } componentWillUnmount() { clearInterval(this.interval); } render() { return <ProgressBar value={this.state.value} /> } } ReactDOM.render(<App />, document.getElementById('root')); 

 @import url(https://fonts.googleapis.com/css?family=Montserrat); body { font-family: 'Montserrat', sans-serif; } .progressBar { width: 500px; height: 50px; background: #FDE9EC; border-top-right-radius: 15px; border-bottom-right-radius: 15px; } .currentProgress { height: inherit; background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);; border-top-right-radius: inherit; border-bottom-right-radius: inherit; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id='root'></div> 

如您所见，这非常简单： ProgressBar Component呈现两个div 。 第一个是进度条，而内部div是当前进度，由作为props传递的值给出。
对于边框，由于具有父级/子级层次结构，因此可以使用inherit CSS值。