进度条样式用渐变来实现

CSS3渐变

css3渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义

使用渐变做进度条

代码：

进度条

div{

width: 180px;

height: 30px;

border-radius: 5px;

background-color: skyblue;

background-image: linear-gradient(135deg, blue 25%, transparent 25%, transparent 50%, blue 50%, blue 75%, transparent 75%, transparent 100%);

background-size: 30px 30px;

}

本文由web前端精髓为您提供