相信很多朋友在写页面的时候都会遇到类似步骤条的效果。进入第x步的时候，前面是高亮的，后面是灰色的，甚至可能还有一些其他的样式，反正基本上就是这样的效果。对于这样的效果，一般情况下，像width:33%这样的宽度或位置控制；写在style属性中，由JS计算。其实在HTML5的formtype属性中，我们可以结合伪元素快速实现类似stepbar的效果，只需要修改标签的value属性值即可。现在我想谈谈进度标签元素。从代码来看，非常简单。label元素中间有一个和value值相同的内容。主要是为了在低端浏览器不支持的情况下显示数字结果。现在，这就是您在考虑浏览器兼容性时所做的事情。如果您更关心兼容性，可以查看https://caniuse.com/progress。33从上面的代码我们可以很容易的了解到要显示的进度是在1到100之间的33个位置，或者我们可以也直接理解为33%的部分。这是chrome浏览器的默认效果。简单的HTML标签，直观的效果。那么可能有人会问了，现在只有这么一个label元素，一般progress都有好几种颜色，怎么处理呢？是的，这的确是个问题，但也只是表面上的问题。如果我们在DevTools设置中打开ShowuseragentshadowDOM，然后选择progress元素，就会出现一个新的世界。现在我们可以看到还有几个元素在进行中，那么我们就可以利用这些伪元素来帮助我们实现更多的效果。进度{显示：块；宽度：300px；高度：35px；底部边距：10px；-webkit-appearance:none;}progress::-webkit-progress-bar{background:url(bg_step.0;}progress::-webkit-progress-value{background:url(bg_step.png)no-repeat0-50px;}progress[value="2"]::-webkit-progress-value{background-position:0-100px;}progress[value="3"]::-webkit-progress-value{background-position:0-150px;}我用了一张sprite图片来处理的很粗略，图片就是上一张的stepbar图片，但是最终的效果是根据不同的value值来展示高亮部分的steps。如果你想要做的好，做的完整，那么就需要在细节上进行处理伪元素分析在上一张带有伪元素的图片中，我们可以看到progress也包含了以下三个伪元素：-webkit-progress-inner-element-webkit-progress-bar-webkit-progress-value然后加上::after和::before，一共有5个元素，当然这5个伪元素是有层次的inner-element>(bar>value)+before+aftervalue包含在bar中，也就是在element中，最终element与before和after处于同一层级。说到分析，其实也没什么好分析的。知道了这几个伪元素之间的关系，除了before和after需要添加content属性外，其他三个在具体使用上和普通标签元素没什么区别。特别说明知道这些伪元素的存在后，是不是感觉很开心呢？一个progress其实包含了这么多的伪元素，就像一个组件一样。哦，是的，这是一个“组件”。那么接下来，是不是可以马上开始写样式，制作效果呢？progress::before{content:'linxz开始样式处理';}progress::after{content:'简单粗暴的样式linxz';}progress::-webkit-progress-inner-element{box-sizing:content-box;border:3pxdashed#333;}progress::-webkit-progress-bar{background:#0f0;}progress::-webkit-progress-value{background:#f00;}打开页面看看有没有发现对吗？这肯定不对，这不是设置了一个绿色条和一个红色值吗？但是为什么没有用呢？而且元素的边框没有出来，这是为什么呢？其实这主要是因为我们少写了一个属性，需要加上progress。progress{-webkit-appearance:none;}现在我们再看一遍，发现世界已经开始改变了。appearance属性的主要作用是改变元素的外观，progress内置了appearance样式，默认值为auto，表示这个元素很可能会随着系统的主题而改变。MDN中有这样的介绍：appearanceCSS属性用于根据操作系统的主题，使用平台原生样式显示元素。同时，拥有大量的属性值效果也是必不可少的，这里就不一一解释了。但是需要注意的是，如果我们要添加一些特殊的组件，尤其是表单类型，不管有没有默认的appearance属性，随便添加即可。当然，最稳妥的方法还是通过DevTools查看计算样式。总结一下，首先请注意，文章中并没有对相应的属性进行深入的描述，比如value、min、max，不好解释；其次，我主要想跟大家提一下，我们可以使用progress中的value等属性来更快的获取一个进度条的值，然后结合progress伪元素来做一些页面效果。是的，这就是我想说的主要内容。可能有人会觉得demo的效果很难看，那是必然的。手边没有最直接的demo，但是突然有这样一个想法，所以就写了这么一个简单的介绍。但是请相信，有1个progress和5个伪元素可用，相当于6个label元素，能做的事情还是很多的。比如添加渐变、动画等，就会有好看的效果。但必须注意的是，外观属性不能忘记！相关阅读：轻松实现进度条Meter的方法之一首发个人公众号：知乎子乐（https://mp.weixin.qq.com/s/jC...
