小编chu*_* NG的帖子

如何从右到左渲染进度元素?

我有一个从左到右显示的进度条。我需要制作另一个相同风格的进度,但将从右到左显示。

这是我的风格定义:

progress, progress[role] {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background-size: auto;
    height: 50px;
    width: 100%;
    padding-top: 10px;
}
 progress[value]::-webkit-progress-bar {
     background-color: grey;
     border-radius: 2px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
 }
 progress[value]::-webkit-progress-value {
    background-image:
        -webkit-linear-gradient(-45deg, 
                               transparent 33%, rgba(0, 0, 0, .1) 33%, 
                               rgba(0,0, 0, .1) 66%, transparent 66%),
        -webkit-linear-gradient(top, 
                               rgba(255, 255, 255, .25), 
                               rgba(0, 0, 0, .25)),
        -webkit-linear-gradient(left, #09c, #f44);
    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%; 
}

.valuebar {
    position: relative;
} …
Run Code Online (Sandbox Code Playgroud)

html css progress-bar

2
推荐指数
1
解决办法
2326
查看次数

标签 统计

css ×1

html ×1

progress-bar ×1