html 进度条 样式_使用HTML5创建和样式化进度栏

在这篇文章中，我们将讨论如何在文档中添加此元素，如何与CSS 样式它和动画进度条计。

让我们开始吧。

基本用法

进度条可以用<progress>添加； 进度值由value ， min和max属性确定，如下所示。

<progress value="10" max="100"></progress>

由于这是一个本机进度栏，因此呈现方式因平台而异。 以下是Windows和OSX中本机进度栏的外观。

现在，让我们尝试设计此进度条的样式，以使其在所有平台上具有一致或相似的外观。

样式进度栏

在样式表中，我们实际上可以使用元素选择器定位并向<progress>元素添加样式规则。 在此示例中，我们更改了背景颜色，删除了边框线，并通过在边框高度的一半处添加边框半径来使其变圆。

progress {
	background-color: #f3f3f3;
	border: 0;
	height: 18px;
	border-radius: 9px;
}

但是，每个浏览器对此的处理方式都有些不同。

在Firefox中 ，样式会影响进度栏，而进度表/值不会受到影响。

在Chrome和Safari中 ，它将从平台上删除本机样式和演示文稿࿰