progress标签设置进度条样式,

　　一、对进步要素的基本理解

　　1.基本的UIprogress元素属于HTML5家族，引用进度条。IE10等可靠浏览器支持。下面的简单代码：

　　XML/HTML代码复制内容到剪贴板progresso(︶︿︶︶︶︶︶︶︶︶︶︶︶︶︶︶︶︶︶︶︶︶︶6有人想知道，“唉，为什么我看到一个字符表达式？”良好的.我只能对你说：“我鄙视你，你舍不得用靠谱的浏览器吗？”！"

　　这种默认效果在不同的浏览器中是不同的，如下面的截图所示(在窗口7下):

　　IE10颗粒的缓慢移动和分散效果令人印象深刻。

　　2.基本属性最大值、值、位置和标签。

　　(1)max是指最大值。默认情况下，进度值的范围为0.0 ~ 1.0；如果max=100，则进度值的范围为0~100。

　　(2)价值就是价值。如果max=100，value=50，进度刚好是一半。value属性的存在决定了进度条是否具有确定性。你什么意思？比如progress/progress没有值，就是不确定的，所以它的外观是IE10浏览器下的无限循环虚点动画；但是一旦有了值属性(即使没有值)，比如进度值/进度，也认为是确定的，虚拟点动画已经进入不朽模式3354，截图如下：

　　(3)position是只读属性，表示当前进度的位置是value/max的值。如果进度条不确定，则值为-1。

　　(4)labels也是只读属性，获取指向progress元素的label元素。例如，document . query selector( progress )。标签，它返回HTMLCollection。以下是我一次测试的截图(取自Opera浏览器，目前FireFox18.0.2和IE10好像不支持)。

　　二、progress元素兼容性处理示例html代码

　　XML/HTML代码将内容复制到剪贴板progress max= 100 value= 20 ie style= width:20%；/ie/progresscss兼容代码

　　CSS代码内容到剪贴板进度{ display:inline-block；宽度：160px高度：20pxborder:1 px solid # 0064 B4；背景色：# e6e6e6颜色：# 0064B4/* IE10 */}/* ie6-ie9 */progressie { display:block；身高：100%；背景：# 0064B4}进度：-moz-progress-bar { background:# 0064 B4；}进度：-WebKit-进度条{背景：# e6e6e6}进度：-WebKit-progress-value { background:# 0064 B4；}基本上完美解决了浏览器之间的差异。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。