• 自定义 HTML5 Progress 的样式


    Progress 元素是 HTML5 标准草案中新增的元素之一,W3C 关于此元素的定义请猛击这里。默认情况下,Progress 会生成一个和系统默认样式一样的进度条。Webkit 中对于 Progress 的默认样式定义在这里可以找到。在 Windows 7 和 MaxOS Lion 中的显示效果如下:

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

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

    <progress>
        ┗ <div> ::-webkit-progress-bar
             ┗ <div>::-webkit-progress-value

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

    示例:

    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 全系不支持此元素(这简直是一定的)。

  • 相关阅读:
    Java NIO:NIO概述
    Elasticsearch在windows上安装好了之后怎么使用?
    Elasticsearch之基本操作
    elasticsearch 第五篇(文档操作接口)
    elasticsearch 第四篇(API约定)
    elasticsearch 第三篇(安装篇)
    elasticsearch 第二篇(配置篇)
    非智能手机通信录备份并还原至Android智能手机方法
    ADB server didn't ACK 问题解决
    Samsung I9103刷cm-10.1的方法
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2101927.html
Copyright © 2020-2023  润新知