可怕,原来精通 HTML 的你们居然不知道这个标签!

这样的标题显然很明显是标题党的感觉,但事实上,我今天居然才知道原来那么多人不知道这个标签的存在,真想不到那些所谓的精通 HTML 和精通 CSS 的同学们,你们真的有看过这个好玩好用的标签吗?

写上面这句话的时候,我心里好怂,因为我知道我也很久没去回顾 HTML 和 CSS 了,肯定也有很多东西是我不知道。但讲真的,这个标签可以了解一下,尤其经常要做进度、用户操作步骤的同学,真的可以了解一下。

说了这么多,其实这个标签就是 而已。

要说这个东西有什么用,怎么用,我就先截个图,这个页面是几年前写的。

至于那个所谓的默认样式,就要看系统,准确点应该是说根据系统的主题(windows系统)来设定了,比如默认主题的 windows 中效果是这样的:

来源:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

→ 要说兼容性的话,可以点击这里查看 ←

对于这个标签很简单,设定的一个 以及 值就可以了,至于最终的效果,那么就可以根据 CSS 效果来改变进度指示了,具体怎么玩怎么用,这个就看想要的效果是什么,然后怎么结合 CSS 来实现。

罗列几个在 webkit 下的伪元素:

要说怎么用呢,其实也简单,大概就是这样

progress::-webkit-progress-bar{background:#E5E5E5;}

progress::-webkit-progress-value{background:-webkit-linear-gradient(top,#bfd2550%,#8eb92a50%,#72aa0051%,#9ecb2d100%);}

突然发觉自己写的内容越来越水了,难怪关注的人也越来越少了,……

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180702G17I5600?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券