html progress标签使用有什么限制

发布网友发布时间：2022-05-11 22:54

我来回答

共2个回答

懂视网时间：2022-05-12 03:15

html progress标签用于标示任务的进度（进程），请结合<progress>标签与JavaScript一同使用，来显示任务的进度。

html progress标签怎么用？

作用：标示任务的进度（进程）。

说明：<progress> 标签是 HTML 5 中的新标签。

注释：请结合 <progress> 标签与 JavaScript 一同使用，来显示任务的进度。

html progress标签示例

<!DOCTYPE html>
<html>
<body>
下载进度：
<progress value="22" max="100">
</progress>
<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 progress 标签。</p>
</body>
</html>

效果：

热心网友时间：2022-05-12 00:23

使用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:*；}设置的背景色就会显露出来。