Question

<progress></progress>标签怎么做带百分比的进度条

Answer 1

使用progress{border:*; background:*;}可以控制所有浏览器下progress元素的边框和背景色。其中丛神，Chrome浏览器是个特例，直接的设置看不到效果（实际上支持），原因下面会解释。
FireFox浏览器已经完成的进度条，使用progress::-moz-progress-bar { }表示，这与Chrome浏览器是相反的。
Chrome浏览器Chrome的表现与FireFox有着明显的差异，其progress元素的结构似乎是这样的：

progress┓ progress-value progress-bar
其中，progress-bar指全部的进度，progress-value指已经完成的进度。因此，Chrome浏览器下，已经完成的进度条，使用progress::-webkit-progress-value { }表示， FireFox浏览器下是*-bar. 而progress-bar默认含有背景色，因此，我们需要如下设置，以自定义背景色：progress::-webkit-progress-bar { background: *; }这也很好地解释了上面的一个疑问？progress{background:*；}为什么不能让progress元素背景色改变呢？不是不能改消唯变，而是被progress-bar这个内部元素给覆盖了，拿郑培当我们设置：progress::-webkit-progress-bar { background: transparent; }的时候，progress{background:*；}设置的背景色就会显露出来。