自定义html中Progress的样式

看起来貌似还不错，但是如果运行在 Windows XP 下呢？想一下就够头疼了，何况出于一致性的考虑，很多情况下我们还是想能够控制这个进度条的样式。

查看了 Webkit 项目中关于 Element Progress 的定义，Progress 在渲染时会被解析成以下结构：

 progress  ┗ p ::-webkit-progress-bar ┗ p ::-webkit-progress-html' target='_blank'>value

通过 ::-webkit-progress-bar 和 ::-webkit-progress-value 两个伪元素选择符（之前伪元素的名称是 ::-webkit-progress-bar-value，今年上半年的某个 Patch 改成了现在这样，这里可以看到 Chromium 中一个相关的 Issue），可以定义第一层和第二层的两个 p 的样式。

示例：

progress { border-radius: 2px; border-left: 1px #ccc solid; border-right: 1px #ccc solid; border-top: 1px #aaa solid; background-color: #eee;progress::-webkit-progress-bar { background-color: #d7d7d7;progress::-webkit-progress-value { background-color: #aadd6a;}

以上 CSS 可以定义一个如下效果的 Progress Bar：

同时支持 CSS 动画、背景图片等特性哦，这样就可以根据自己的需要打造一个完全个性化的 Progress Bar 了。另外 Gecko 核心的浏览器也可以通过一个类似的伪元素 ::-moz-progress-bar 来实现同样的效果。IE 全系不支持此元素（这简直是一定的）。

以上就是自定义html中Progress的样式的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。