|
发表于 2024-8-6 10:12:52
|
显示全部楼层
本帖最后由 jeanleem6 于 2024-8-6 10:21 编辑 , K& ` _+ {# E5 Q+ o
' o% o+ J2 C! x% ~HTML:
, q! g6 k" x+ R' {. \
/ L7 k2 O/ j, q4 [- <progress class="blProgress blue" value="92" max="100">92%</progress>, r1 u( B0 v. N+ E. Y
- <progress class="blProgress red" value="93" max="100">93%</progress>8 Q/ @) G: b3 s U6 I
- <progress class="blProgress yellow" value="50" max="100">50%</progress>
复制代码 % N/ V5 C, B; r! s0 I3 I& R
5 x$ ~/ B" A3 H$ Q7 _, K, SCSS:
2 P. y/ @, ?" z" R
3 ~: T3 f% h" |% W* n* b- progress {
. d5 ?7 t4 a+ j - -webkit-appearance: none;
3 G' N- B, t0 P V D1 S - }4 B/ S5 s& w5 l1 k0 ]# H, h! H
- ::-webkit-progress-bar {
" i' [6 N7 A3 ? z3 p2 M ]4 y% Y - height: 12px;) G4 ?2 z q+ P8 P+ m
- border-radius: 6px;
# X* c! x* b' C# D. h - background-color: #f0f0f0;! L- u$ Z1 l) C4 v5 M* C
- }$ ?1 b* g) U# n$ P2 Q! B
- ::-webkit-progress-value { z A, u. a. D' B
- border-radius: 6px;: _$ S! e U; c3 N) p
- }
% J8 h; L; Z) j) d% Z - * S' D' j- J* Z9 Y
- .blue::-webkit-progress-value {
* y& P5 `% d& K& ? - background-color: #95a5e9;
* v4 R4 K" |5 V8 q - }* p6 D. d+ M: R- L" b# z5 L6 p
- .red::-webkit-progress-value {
7 v, U G N5 y6 D( E& v - background-color: #e995a1;
- }. \, z D1 M9 H - }
5 U' U! P! C) r' |- i$ U - .yellow::-webkit-progress-value {2 ~& i x( ?4 E+ @" O+ ?
- background-color: #ebd28d;
3 n( |5 _7 C) V - }
复制代码 4 L$ x& f/ M! r. g* I X% @
/ Z3 n- U0 X! u0 S1 n
注意:::-webkit-progress-bar、::-webkit-progress-value 这两个 css 伪元素并不在 CSS 标准中1 \7 D5 r& T! r
浏览器也存在不兼容(也就是说有的浏览器不支持它们,比如 Firefox 对这两个伪元素都不支持,其它浏览器版本过低也不支持)
2 z$ m( v1 F5 c6 M+ l4 R) @
3 k0 Z- H i8 y. O: E, h! [
% y! Q5 l0 j+ M8 p6 y4 E# ]/ {, D
' ]; z( u: `$ X
+ p5 [" j* B2 C" k以下是兼容各种浏览器的写法,不过需要修改你现有的 html 标签:
+ a- O1 U* C4 w; }9 _( J/ X0 M; h
2 |, o% K. i2 fHTML:' W5 s! E( l8 O$ J9 ^: r
$ E, j% y( j9 W# g% h! o! m2 w" w* s3 ?- <div class="progress">
3 H0 J9 I9 z% ?$ K - <span class="value blue" style="width: 92%"></span>; l1 d+ {' E9 w$ y2 E Z) S
- </div># S" p2 m: W& F+ [
- <div class="progress">! C7 C- ^+ C+ } F1 q" \
- <span class="value red" style="width: 93%"></span>
5 `2 B# B* o) x$ R - </div>+ i6 i4 ]5 B4 }7 U9 R: k
- <div class="progress">4 z( Z/ u- F3 L1 {. E# ?+ [' A
- <span class="value yellow" style="width: 50%"></span>
1 \) Y0 J" H' }* U7 b; V6 y. ^1 N - </div>
复制代码 ; n; h/ P# o9 \4 N I! F- @+ P
3 ^& I0 e) W4 r# @( j4 m
CSS:3 y3 S/ t0 [7 N. N5 E) ^4 J3 f+ t
# S, G6 c$ _% ?2 P& \& G: w- .progress {
/ g* P# [0 g& N8 n j - height: 12px;
. h# b3 l. v' r8 q; m - margin: 1em 0;
0 v+ y3 W4 M* H3 X# p; i - border-radius: 6px;
W1 X( j. N9 z+ \7 J - background-color: #f0f0f0;
4 O, m! f: p0 c0 a. @1 g - text-align: left;2 ~( I# g8 E! P& K" N: @% i
- }
* I6 O J: x7 B; p' ]" } - .progress .value {
) F6 T# t- g& _% T - display: inline-block;+ C+ S6 _/ d1 K4 L0 I
- height: 12px;* |0 [, ?$ f: K' I+ S& P1 ~
- border-radius: 6px;" v% x6 U+ |4 d. f
- vertical-align: top;
, h; ^$ k5 s! q4 w - }/ X4 j4 S. A% t( W; h$ I
- .progress .blue {
& y0 f, } y* n2 z; |# D - background-color: #95a5e9;* }* P* B, i) E" Z. [* `! P
- }6 Z1 [( I- _& t; u5 b1 a
- .progress .red {! S2 o7 k* m4 {% e6 r* ]
- background-color: #e995a1;
7 G: W& k- l" l, {7 _. s - }
; @$ c) @' Y: U+ X8 Y3 ~7 t1 ^ - .progress .yellow {
: _7 c3 M; D6 E" z; \ - background-color: #ebd28d;1 ] N8 {7 g& G$ j5 h" v9 `$ v. f
- }
复制代码
8 U1 U8 N1 h z+ f5 n C3 R! m0 f: e8 }
附上两种实现方式的 HTML 文档(解压后用浏览器打开可查看效果)
; o4 f( n v1 w x/ y
. q5 [- x5 i: j( G. x8 y |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?免费注册
x
评分
-
1
查看全部评分
-
|