如何修复进度条的 css

Question

我在我的应用程序中使用 React，我正在尝试制作一个“进度条”来表示正在使用的余额百分比，如下图所示：

它工作正常，但当百分比较低（5% 或更少）时，边框半径停止正常工作，使条形显示在框架之外：

我有办法解决这个问题吗？这是我用于进度条的 .scss 文件


.progress-bar {
    background-color: #c5c5cb;
    border-radius: 20px;
    outline: 1px solid #212429;
    outline-offset: -0.5px;
    position: relative;
    height: 20px;
    width: auto;
    margin-right: 12px;
    margin-left: 12px;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.progress-done {
    background: linear-gradient(to left, #4A439A, #6950AC);
    border-radius: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0;
    opacity: 0;
    transition: 1s ease 0.3s;
}

Answer 1

在你的 .progress-bar class 中尝试 overflow: hidden;。

如何修复进度条的 css

How to fix css for progress bar

html

css

sass

progress-bar

reactjs