css模拟进度条 |css内边距怎么写

/* 进度条外框 */
.progress-bar {
width: 100%;
height: 20px;
border: 1px solid #ccc;
position: relative;
}
/* 进度条背景 */
.progress-bar .bar {
width: 0%;
height: 100%;
background-color: #ccc;
}
/* 进度条前景 */
.progress-bar .bar.active {
background-color: #3498db;
}
/* 进度条文本 */
.progress-bar span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

首先大家需要一个进度条的外框。这个外框的大小由大家自行决定，这里大家设置它的高度为20px，边框为1像素的灰色实线。进度条的宽度由子元素决定，这样设置可以让大家方便地控制进度条的长度。

进度条的背景色是gray，大家把进度条的前景色设为blue。这里大家用一个名为“active”的类来控制进度条的宽度。例如，如果大家需要让进度条的完成度达到50%，那么大家只要在进度条外框中添加下面这一行代码：

最后，大家给进度条添加了一个居中的文本。这个文本的内容可以是进度条的完成度百分比，也可以是任务的名称等等。大家使用了CSS的“transform”属性来实现文本的居中，它兼容大多数现代浏览器。