购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

3.5.2 <progress>元素的样式自定义

由于默认的<progress>元素样式往往不是业务需要的,因此我们需要进行额外的样式自定义,此时参考下面的代码进行设置就可以了。

上述代码的效果如图3-41所示。

图3-41 <progress>元素的样式自定义

如果同时希望对不确定态的进度条元素进行样式自定义,则可以使用:indeterminate及背景图像动画来模拟原生的水平来回移动效果,参考CSS代码如下(在上述自定义CSS代码的基础上新增):

上述代码的效果如图3-42所示。

图3-42 <progress>元素不确定态的样式自定义

以上所有代码和截图效果你都可以通过在浏览器中输入地址https://www.htmlapi.cn/3/5-1.html或扫码访问来体验。 tzi8Js2C9PvW2l/7Gb87igmffW1RlsNAiD/+k8gQxsZnuZBOh0UUq7XH5wGYv7oJ

点击中间区域
呼出菜单
上一章
目录
下一章
×