发布网友 发布时间: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:*;}设置的背景色就会显露出来。