Question

我正在尝试将linear-gradient应用于html进度条，但它没有应用渐变

＆＃13;

var customColor = '#cf014d';

ReactDOM.render(React.createElement("progress", { max: "100", value: "80",
  style: { color: "linear-gradient(to left, #fff, #fff)" } }), document.getElementById('root'));

＆＃13;

<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>

＆＃13;

Answer 1

您需要使用background:代替color:

color - 用于文字颜色

Answer 2

使用background:作为背景颜色。 color用于前景色。

但是，除此之外，每个用户代理以专有方式呈现进度条，一组样式规则不适用于所有浏览器。仅设置元素的样式是不够的，浏览器会将进度条呈现为一系列元素，并且每个部分都必须正确设置样式。

这是一个使用React创建进度条的示例，但使用静态CSS对其进行样式设置，以便在符合-webkit-供应商前缀的浏览器中进行渲染。

ReactDOM.render(React.createElement("progress", { max: "100", value: "80" }), document.getElementById('root'));

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
   appearance: none;

  width: 500px;
  height: 20px;
}

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 25px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
  background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #09c, #f44);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 3

后台属性将设置＆＃34;背景＆＃34;部分 - 不是价值。

这是关于为进度条设置样式的好文章。 https://css-tricks.com/html5-progress-element/

为什么内部风格在html进度中不起作用

3 个答案: