css 进度条圆角 |css实现图片移动

.progress {
position: relative;
height: 10px;
width: 100%;
background-color: #e0e0e0;
border-radius: 10px; // 添加圆角样式
overflow: hidden;
}
.progress-bar {
position: absolute;
height: 100%;
background-color: #2196f3;
border-radius: 8px; // 进度条同样添加圆角，使其与进度条底部对齐
transition: width .2s ease-in-out;
}
.progress-50 {
width: 50%; // 设置进度条宽度为50%
}

以上是一个简单的CSS进度条的代码示例，其中给进度条和进度条条添加了border-radius属性，将其样式设为圆角。这样，即使进度条条的宽度比进度条底部的宽度小，进度条条也会与进度条底部完美对齐，达到更美观的效果。